div左と右の 2 つの列を持つレイアウトがありますdiv。
右側にはdiv灰色の がありbackground-color、これをユーザーのブラウザ ウィンドウの高さに応じて垂直方向に拡張する必要があります。現在、 はbackground-colorその の最後のコンテンツで終わっていますdiv。
height:100%、、min-height:100%;などを試しました。
ベストアンサー1
CSS 3 には次のような測定単位がいくつかあります。
ビューポート パーセンテージ(またはビューポート相対)の長さ
ビューポート パーセンテージの長さとは何ですか?
上記のリンクされた W3 候補推奨事項から:
ビューポートのパーセンテージの長さは、初期包含ブロックのサイズに相対的です。初期包含ブロックの高さまたは幅が変更されると、それに応じて拡大縮小されます。
これらの単位は、vh(ビューポートの高さ)、vw(ビューポートの幅)、vmin(ビューポートの最小長)、vmax(ビューポートの最大長) です。
これを使用して、区切り線をブラウザの高さいっぱいにするにはどうすればよいでしょうか?
この質問では、 を利用できますvh。1vhはビューポートの高さの 1% に等しくなります。つまり、100vh要素が DOM ツリーのどこに配置されているかに関係なく、 はブラウザ ウィンドウの高さに等しくなります。
html
<div></div>
CS
div {
height: 100vh;
}
必要なのは文字通りこれだけです。JSFiddle の例これを使用中。
これらの新しい単位をサポートするブラウザはどれですか?
これは現在、Opera Miniを除くすべての最新の主要ブラウザでサポートされています。使ってもいいですか...さらなるサポートのために。
これを複数の列でどのように使用できますか?
左と右の仕切りがあるこの質問の場合、JSFiddle の例vhと の両方を含む 2 列のレイアウトを示していますvw。
100vhとどう違うのですか100%?
次のレイアウトを例に挙げます。
<body style="height: 100%">
<div style="height: 200px">
<p style="height: 100%; display: block;">Hello, world!</p>
</div>
</body>
ここでタグpは高さ100%に設定されていますが、タグに含まれる要素のdiv高さは200ピクセルなので、200ピクセルの100%は高さの100%ではなく200ピクセルになります。代わりにbodyを使用すると、タグは高さに関係なく100%の高さになります。これを見てみましょう。100vhpbodydiv付属のJSFiddle違いが簡単にわかります！