低価格、短納期、高品質なWebサイト制作|ScuderiaWeb

ヘッダとフッタを固定して常に表示

少し前までのWebサイト制作ではフレームによって簡単に実装されていましたが、Web標準が重視されフレームの使用がご法度になった今、画面全体がスクロールするWebサイトが一般的になりました。しかし、コンテンツ部分が長くなると、コンテンツ上部にあるメニューボタンの利用が不便になるなど、ユーザビリティの低下も否めません。
好みや慣れもあると思いますが、XHTML+CSSでフレームのようにヘッダとフッタを画面の上下に固定し、常に表示する方法をご紹介します。

ページの情報量が少ない場合も画面最下部にフッタを表示する方法は、フッタ固定で紹介しています。

サンプル

ヘッダとフッタを固定して常に表示するサンプル（別ウィンドウで表示）

ソース

上記サンプルで使用しているソースです。

CSS

body{
	margin: 0;
	padding: 100px 0 50px 0;
}
* html body{
	overflow: hidden;
} 
div#headerArea {
	position: fixed !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-color: #4E9ABE;
	color: #fff;
}
div#footerArea {
	position: fixed !important;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: #4E9ABE;
	color: #fff;
}
* html div#contentsArea{
	height: 100%;
	overflow: auto;
}

XHTML

<div id="headerArea">Header</div>
<div id="contentsArea">
	Start<br />
	Contents<br />
	Contents<br />
	Contents<br />
	Contents<br />
	Contents<br />
	End
</div>
<div id="footerArea">Footer</div>

ポイントはbodyのpaddingとheader・footerのposition指定。

bodyのpaddingではtopにヘッダの高さ、bottomにフッタの高さを指定します。
ヘッダとフッタ領域にはpositionでfixedを指定。しかしバージョン6以下のIEでは対応していません。そのため!importantを指定して、対応ブラウザと未対応ブラウザで処理を分けます。