コンテンツの量によってフッターの位置を変える
wrote :
具体的には、ブラウザ表示領域（ファーストビュー）とコンテンツ高さを比較して、コンテンツ高さの方が短い場合、フッターは下部に固定。コンテンツ高さの方が長い場合、スクロールした下部にフッターを表示させます。
ポイント
- html,bodyに高さ100%を設定する。
- min-heightの設定。高さを100％にする。
- min-heightが効かないIE6以下のための記述を追加（指定したpxより長いコンテンツは自動解釈されることを利用して、heightを100%にする）。
- フッターが表示される領域を確保するために、フッターの高さ分の負のmarginを使用。
- コンテンツとフッターが被らないようにするため、コンテンツ領域に「padding-bottom:（フッターの高さ）」を指定する。
- フッターの高さを指定する。
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;
}
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>
<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では若干動作が不安定（リサイズした場合など）でした（個人的にはブラウザシェアと情報が失われるわけではないことを考慮すると許容範囲ですけど）。