CSS ブラウザの縦幅に合わせレイアウト調整
2011.06.05
この記事は最終更新日から1年以上が経過しています。
ブラウザの垂直方向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%」でフォロー。

















