標準準拠でheight100%のボックス

今回は標準準拠モードでheight100%のボックスをbody直下に作る方法を紹介します。過去互換モードでは何の苦もなくできることですが、標準準拠でやるにはちょっとしたテクニックが必要です。

テクニック使用前

サンプル

テクニック使用後

サンプル

テクニック使用後のボックスは下までボックスが伸びていること、ウィンドウの大きさに合わせて高さが変化し、画面端のスクロールバーが出ないことを確認してください。

やり方

１：HTMLを書く

HTMLはこんな感じになります。

<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の内容を追加します。これは一種のバグ対策のようなものなので、深い説明は省きます。

もっとも最初からはみ出すようなら、このテクニックを使う必要はないわけですが。

使いこなすための＋α

このテクニックはIE5（過去互換モード）では使えないので、そこんとこよろしくです。というより、height100%のボックスを作るなら最初から過去互換で作った方が楽かもしれません。

このテクニックは更なる応用技へとつながります。・・・続編をお楽しみに。

一覧へ戻る