関連：
CSSの「height:100%」について - webデザイナーのナナメガキ
height:100%で画面全体に表示させる方法 | Blog hamashun.com
div等に指定した背景をページの下まで伸ばしたい | Takazudo Clipping*なぜこれで実現できるのかの解説と疑問点。とても長い。
tatsuaki.net » ページ下部にくっつくフッターのCSS
標準準拠でheight100%のボックス〜CSSテクニック〜より
↓
<body> <div id="main"> <h1>height100%のボックス成功版</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックスを作ることは不可能ではないのです。 </p> ・・・略 </div> </body>
HTML解説
特に難しいところはありません。ごく普通にbody直下にdivを入れただけです。
* {
margin:0;
padding:0;
}
html{
height:100%;
}
body{
background-image:url(../../../img/back.gif);
height:100%;
width:80%;
margin:0px auto;
}
div#main{
background-image:url(../../../img/sub-back.jpg);
border:solid 1px #760014;
border-width:0px 1px;
height:100%;
min-height: 100%;
}
body > #main {
height: auto;
}
CSS解説
今回のポイントは、html,body,#mainに指定したheight:100%;です。この3つにheight:100%;を指定してやることで、高さ100％のボックスを作ることが出来ます。
ただし、height:100%;のみの指定だとページの内容量が多くなってスクロールバーが出るようになるとfirefoxで崩れてしまいます。
それに対処するために#mainにmin-height: 100%;を指定し、さらにbody > #mainの内容を追加します。これは一種のバグ対策のようなものなので、深い説明は省きます。
もっとも最初からはみ出すようなら、このテクニックを使う必要はないわけですが。
