[使える CSS テクニック] 実案件でも使える！フッターをブラウザ下部に固定する方法

HTML&CSS

ishida

2011.07.05

イメージ

暑い夏がやってきそうなので、久しぶりにツーブロック的な刈り上げにしてみましたishidaです。

今回は最近作業した案件で、これまであまり実践的に使わなかったCSSレイアウトを2サイト連続で使ってみたので、ご紹介。自分も忘れないようにメモ的エントリーです。

フッターをブラウザ下部に固定する

ページ下部に固定されるフッターを実現するためのCSSレイアウトです。
positionで実現する方法もありますが、コンテンツ量によっては表示が崩れるので今回は直球勝負です。

XHTML

ソースはこんな感じになります。

<div id="container">

<div id="header">
ヘッダー
<!-- /#header --></div>

<div id="content">
<h1>フッターをブラウザ下部に固定するサンプル</h1>
<p>本文が入ります。本文が入ります。本文が入ります。</p>
<!-- /#content --></div>

<!-- /#container --></div>

<div id="footer">
フッター
<!-- /#footer --></div>

headerとcontentのdivをcontainerのdivでwrapします。

CSS

CSSはこんな感じになります。

html,body {
	height: 100%;　/* ポイント1 */
}

#container {
	min-height: 100%;　/* ポイント1 */
	_height: 100%; /* for IE6 */
}

#header {
	margin: 0 0 10px;
	padding: 10px;
	border-bottom: 5px #000 solid;
}

#content {
	width: 960px;
	margin: 0 auto;
	padding-bottom: 110px; /* ポイント3 */
}

#footer {
	height: 100px;
	margin-top: -100px; /* ポイント2 */
	padding: 0 10px;
	background: #000;
	color: #FFF;
}