画面下部にフッター表示

このエントリーをはてなブックマークに追加

動的サイトで画面の下部にフッターを表示する事は非常に困難です。
さまざまなパターンを想定してフッターを設定することになります。

コンテンツ領域がブラウザの高さより高い場合

この場合、通常の方法で問題なく表示できます。

サンプル(コンテンツのheight:1000px)

ただし、コンテンツ領域がブラウザの高さより低い場合、画面下部に大きな余白が発生します

サンプル(コンテンツのheight:100px)

コンテンツ領域がブラウザの高さより低い場合

この場合は、高さ100%のボックスを作成する方法を使用して、画面に対してheight100%のボックスを作成して、postionを利用して画面下部にフッターを持ってくることで、表示が可能になります。

サンプル

ただし、この方法ではIE6以外のブラウザでは、コンテンツ領域がブラウザの高さより高い場合、フッターが初期表示の際の下部に表示されてしまし、スクロールで自由に動いてしまいます。

サンプル

コンテンツの中身が決まっていたら、正しく表示される方を利用すればよいのですが、動的サイトの場合、コンテンツの内容が決まっていないので、どちらかを選ぶことができません。

その場合は以下のようなcssで実現可能です。

html,
body{
	height:100%;
	margin:0;
	padding:0;
}
div#continer{
	background:#39FF6B;
	position:relative;
	min-height: 100%;
}
* html div#continer {
	height:100%;
}
div#main{
	height:1000px;
	padding-bottom:1em;
}
div#footer{
	background:#DEFF4A;
	position:absolute;
	bottom:0;
	width:100%;
}

div#continerのheightのデフォルトの値はautoなので、何も指定しなければコンテンツ領域にあわせて拡張されます。

次にdiv#continerに対してmin-height: 100%;を設定します。
これによりIE6以外のブラウザは、コンテンツが少ない場合でも高さ100%で表示されます。

次にスターハックを利用してIE6に対してheight:100%を設定します。
IE6はコンテンツが多い場合でもheight:100%でコンテンツ領域を拡張するバグがあるためこれを利用します。

最後にフッター分の領域をdiv#continer内に確保する為、div#mainに対して padding-bottom:1em;を設定しています。

サンプル

伝統的な手法ですがIE7用に手を加えているので参考にしてください。

スポンサードリンク