2009 年 10 月 13 日
スタッフブログ
Staff Blog
フッターを一番下に表示させるCSSコーディング
Web制作でよく質問される事柄があります。
レイアウトに関する事柄なんですが、
「CSSを使ってフッターを常に一番下に置きたい」
なぜかといいますと、デザインの段階では問題ないのですが、
コーディングをして、いざブラウザで確認というときに
「あれ？下すかすかだ！」
という変な感じになってしまうからです。
コンテンツが十分にあれば、下まで伸びるので問題ないですが、
ページの内容によってはそうもいかないですし、
極端な話、縦が異常に長いディスプレイを使っている方が
いた場合、どうしようもないです。
そういう意味でフッターは常に一番下が
いいというわけなんです。
具体的にまずHTML上では
<body>
<div id=”wrap”>
<div id=”main” class=”clearfix”>
/*ここにheaderや、コンテンツを配置*/
<!–main終わり–>
</div>
<!–wrap終わり–>
</div>
<!–footer開始–>
<div id=”footer”>
<!–footer終わり–>
</div>
</body>
そしてCSS上では
※フッターを縦160xとした場合
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 160px;}
#footer {
position: relative;
margin-top: -160px;
height: 160px;
}
padiingとmarginの関係から<div id=”wrap”>
<div id=”main” class=”clearfix”>
/*ここにheaderや、コンテンツを配置*/
<!–main終わり–>
</div>
<!–wrap終わり–>
</div>
<!–footer開始–>
<div id=”footer”>
<!–footer終わり–>
</div>
</body>
そしてCSS上では
※フッターを縦160xとした場合
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 160px;}
#footer {
position: relative;
margin-top: -160px;
height: 160px;
}
mainの下に余白をとり
その余白にフッターを入れてることになります。
min-heightは幅の最小値指定のCSSです。
IE6は非対応で、IE7より対応ですが、
height100%とheight:autoを加えることにより、
実現しています。
IE6はいずれなくなりますが、
まだまだ対応していかないといけないですね。
dk
関連記事：
Filed under: 開発 — 9:39 AM
コメントする
[...] 参考：Bit Star http://bitstar.jp/blog/?p=366 [...]