211

ページの左側にナビゲーション バーがあり、ページの高さの 100% まで拡大したいと考えています。ビューポートの高さだけでなく、スクロールするまで非表示になっている領域も含まれます。これを達成するためにJavaScriptを使用したくありません。

HTML/CSSでできますか？

4

13 に答える 13

187

これが、動的背景のコンテナとして div を使用するときに最終的に思いついた解決策です。

  • バックグラウンド以外で使用する場合は、 を削除しz-indexてください。
  • 高さいっぱいの列の場合はleftまたはを削除します。right
  • 全幅行の場合はtopまたはを削除します。bottom

編集 1:以下の CSS は、FF と Chrome で正しく表示されなかったため、編集されました。position:relativeを HTML に移動し、本文をheight:100%の代わりに に設定しますmin-height:100%。

編集 2: CSS に余分なコメントを追加しました。上記の手順を追加しました。

CSS:

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1; /* Remove this line if it's not going to be a background! */
}

html:

<!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html>

なんで？

html{min-height:100%;position:relative;}

これがないと、cloud-container DIV が HTML のレイアウト コンテキストから削除されます。HTML ボックスの下部を参照するposition: relativeように、描画時に DIV が HTML ボックス内に留まるようにします。ビューポートではなく HTML タグの高さを参照するようになったため、cloud-containerbottom:0でも使用できます。height:100%

于 2012-05-17T16:12:33.747 に答える
14

私は同様の問題を抱えていましたが、解決策はこれを行うことでした：

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}

ページの高さの 100% の高さを持つページ中心の div が必要だったので、私の全体的な解決策は次のとおりです。

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    width: XXXpx; /*otherwise div defaults to page width*/
    margin: 0 auto; /*horizontally centers div*/
}

親要素 (または単に「本体」) を作成する必要がある場合がありますposition: relative;

于 2012-06-14T18:08:10.903 に答える
13

Faux Columnsを使用してチート するか、CSSのトリックを使用することができます

于 2009-04-03T06:06:23.113 に答える
8

絶対位置を使用します。これは、手動で配置したり、フローティング ダイアログを表示したりする必要がある絶対位置の使用に一般的に慣れている方法ではないことに注意してください。ウィンドウまたはコンテンツのサイズを変更すると、これは自動的に引き伸ばされます。これには標準モードが必要ですが、IE6 以降で動作すると思います。

id 'thecontent' の div をコンテンツに置き換えるだけです (指定された高さは説明のためのものであり、実際のコンテンツで高さを指定する必要はありません。

<div style="position: relative; width: 100%;">
      <div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
      <div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
         <div style="height: 10000px;" id="thecontent"></div>
      </div>
</div>

これが機能する方法は、外側の div がナビゲーション バーの参照ポイントとして機能することです。外側の div は、'content' div のコンテンツによって引き伸ばされます。ナビゲーション バーは、絶対配置を使用して、親の高さまで引き延ばします。水平方向の配置では、コンテンツの div オフセット自体を navbar の幅と同じにします。

これは、CSS3 フレックス ボックス モデルを使用するとはるかに簡単になりますが、IE ではまだ利用できず、独自の癖がいくつかあります。

于 2010-06-06T21:10:36.330 に答える
7

テーブルを使用するのは簡単です。

<html>

<head>
    <title>100% Height test</title>
</head>

<body>
    <table style="float: left; height: 100%; width: 200px; border: 1px solid red">
        <tbody>
            <tr>
                <td>Nav area</td>
            </tr>
        </tbody>
    </table>
    <div style="border: 1px solid green;">Content blabla... text
        <br /> text
        <br /> text
        <br /> text
        <br />
    </div>
</body>

</html>

DIVが導入されたとき、人々はテーブルを非常に恐れていたため、貧しいDIVは比喩的なハンマーになりました。

于 2009-04-03T08:40:27.907 に答える
7

私はあなたと同じ問題に遭遇しました。DIVjavascriptを介してdivを簡単に操作できるため、背景として作成したかったのです。とにかく、その div の css で行った 3 つのこと。

CSS:

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}
于 2012-04-18T05:29:17.290 に答える
3 
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
于 2013-04-26T11:34:56.807 に答える
1 

 
           document.body.onload = function () {
                var textcontrol = document.getElementById("page");
                textcontrol.style.height = (window.innerHeight) + 'px';
            }
<html>
<head><title></title></head>
<body>

<div id="page" style="background:green;">
</div>
</body>
</html>

于 2014-10-06T08:31:40.007 に答える