このページで使用している主なスタイルシート
　「*」{
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はこんな感じになります。

height100%のボックス成功版

標準準拠のIEやfirefoxでbody直下にheight100%のボックスを作ることは不可能ではないのです。

・・・略

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%のボックスを作るなら最初から過去互換で作った方が楽かもしれません。

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

WEB学習帳

Fire Fox 使える　アドオン

CSSで　height: 100%; のボックスの作り方

height100%のボックス成功版