CSSで height: 100%; のボックスの作り方
このページで使用している主なスタイルシート
「*」{
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;
}
詳しくは解説を読んでね。
以下解説
やり方
１：HTMLを書く
HTMLはこんな感じになります。
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の内容を追加します。これは一種のバグ対策のようなものなので、深い説明は省きます。
もっとも最初からはみ出すようなら、このテクニックを使う必要はないわけですが。
使いこなすための＋α
このテクニックはIE5（過去互換モード）では使えないので、そこんとこよろしくです。 というより、height100%のボックスを作るなら最初から過去互換で作った方が楽かもしれません。
このテクニックは更なる応用技へとつながります。・・・続編をお楽しみに。
