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%」でフォロー。