このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

ブラウザの垂直方向100%を制御する方法

フッター等を配置する際、コンテンツ量が少ない場合、

ウィンドウサイズよりも上に配置されるのですが、

ウィンドウにサイズ合わせの一番下に配置、コンテンツが多い時は成り行き表示させる方法です。

html

<html>
<body>
<div id="container">
<div id="footer">
</div>
</div>
</body>
</html>

CSS

html,body{
height:100%;
}
#container{
position:relative;
height:auto;
min-height:100%;
}
#footer{
position:absolute;
bottom:0;
}

CSS

*html body #container{
height:100%;
}

IE6はmin-heightプロパティが非対応な為、「height:100%」でフォロー。