0から目指すWebマスター Web制作に関する備忘録
検索

CSS

コンテンツの量によってフッターの位置を変える

具体的には、ブラウザ表示領域(ファーストビュー)とコンテンツ高さを比較して、コンテンツ高さの方が短い場合、フッターは下部に固定。コンテンツ高さの方が長い場合、スクロールした下部にフッターを表示させます。

ポイント

CSS

html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
#container {
min-height:100%;
margin-bottom:-60px;
height:auto;
}
* html #container{
height:100%;
}
#primary{
padding-bottom:60px;
}
#footer{
height:60px;
}

(x)html

<body>
<div id="container">
<div id="primary">
コンテンツ<br />
</div><!–#primary–>
</div><!–#container–>
<div id="footer">
フッター
</div><!–#footer–>
</body>

動作確認済みブラウザ

Windows
IE7,IE6,Firefox3,Firefox2,Opera9.6,Chrome,Safari3
Mac
Safari3,Safari2,Firefox3,Firefox2,Opera9

※Windows Opera9.6では若干動作が不安定(リサイズした場合など)でした(個人的にはブラウザシェアと情報が失われるわけではないことを考慮すると許容範囲ですけど)。