※2022年3月29日
display:gridが発明されたので、古い記事になりました。
新しい記事はこちら
表示するコンテンツが少ないと、
フッターが真ん中あたりに表示されてしまいます。
常に最下部に表示する方法はありますが、
CSSだけでそうするにはフッターの高さが分かっている必要があります。
最近はレスポンシブデザインが主流なので、
フッターの高さを何ピクセル！とは決めたくない…。
かといってフッターの高さを決めずに、常に最下部に表示するにはJSで設定するしかなさそうです。
それはめんどくさいのでCSSだけで挑戦してみたいと思います。
<body>
<div id="main">
<div id="contents">
～真ん中のコンテンツ～
</div>
<div id="footer">
～フッター～
</div>
</div>
</body>
上記のようなHTML構造のとき、CSSで下記のように設定します。
html, body{
height: 100%;
}
#main{
position:relative;
width: 100%;
height:auto !important; /*IE6対策*/
height: 100%; /*IE6対策*/
min-height: 100%;
}
#footer{
position: absolute;
top: 100%;
}
細かい見た目の調整は省いています。
ポイントは#mainにposition:relative;、フッターにposition:absolute;とtop: 100%;を設定していることです。
他のサイトではbottom: 0;にしているかと思います。
こうすることで、フッターの高さ、mainのpaddingなど数値を気にせず、フッターが常に最下部に表示されます。
フッターはいずこへ？
スクロールすると・・・
ありました！
難点は、コンテンツが少なくても必ずウィンドウ高さより下に表示されるので、スクロールしなければいけないこと。
JS設定するの面倒だし、真ん中に表示されてるよりは良いかな～。
