HTMLで縦の高さを100%にしたくてもできなかった経験はないだろうか。
カラムに当てているdivをhegiht:100%;ととしてもコンテンツの高さまでしか伸びなく、あるいはコンテンツよりも低くぺしゃんこになってしまうといったことがある。
コンテンツよりも低くなってしまう場合にはfloatとwidthを当ててあげればコンテンツ分までは伸びてくれる。だがコンテンツが少ない場合、ウィンドウサイズまで伸びきって欲しい場面も合ったりする。伸びてくれない原因はbodyのスタイルの当て方にある。heightをdivに当てても、親であるbodyがheight:100%;になっていないとぺしゃんこになってしまうのだ。下の例ではコンテンツも入っていないのにまるでテーブルレイアウトのように高さが自動的に伸びてくれる。Javascriptを使いたくない場合にはうってつけたろう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style>
html {
background:#F00;
margin:0;
height:100%;
}
body {
background:#FFF;
height:100%;
margin:0 10px;
}
div {
height:100%;
margin:0 10px;
}
p {
background:#FF0;
height:60%;
float:left;
width:200px;
margin:0 10px;
}
ul {
height:20%;
clear:both;
background:#F55;
margin:0;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
</ul>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<ul>
<li></li>
</ul>
</div>
</body>
</html>
