備忘録 CSSで Height 100%

Webページ内に配置したボックスなどのブロック要素で
要素の高さを100%に伸ばそうとしたところ
ちょいちょい忘れるので備忘録

CSSで「height:100%;」と記載するわけですが

< html>
< body>
< div id="container">< /div>
< /body>
< /html>


とした場合
CSSは下の通り。

html,body {
height: 100%;
}

#container {
height: 100%;
min-height: 100%;
}

body > #container {
height: auto;
}


「html」タグと「body」タグに「height:100%;」
要素に対しては
「height:100%;」と「min-height:100%;」

「body」タグの中に入るブロック要素全体の高さが
「body」タグより大きくなった場合には「height: auto;」に切り替える指定も追加します。

参考元:http://black-flag.net/css/20110621-3232.html



[PR]

by hiro__neko | 2013-06-21 11:48 | CSS  

<< jQueryで、画面いっぱいに... 恥ずかしい失敗を忘れないための... >>