[CSS]横スクロール時にヘッダやフッタが切れてしまう時の解決方法

ヘッダやフッタがブラウザの横幅より広い際に、横スクロールするとヘッダとフッタが切れてしまうのを解決する方法を紹介します。
これはIE6などの旧式のブラウザだけでなく、Firefox3.6やChromeでも起きる現象です。

How to Resolve a Fluid Header/Footer Problem When the Window is Resized
デモページ（不具合版）
※キャプチャはFirefox3.6（不具合の確認は横幅を小さくして）

この現象が起きる条件は下記のようになります。

1. ヘッダとフッタのサイズは指定されていない。
   →横いっぱいに広がる。
2. コンテンツエリアのサイズは指定されており、「margin:auto;」で中央に配置。
3. ブラウザのサイズはコンテンツエリアのサイズより小さい。
   →ブラウザに横スクロールバーがでる。

期待される表示は、下記のようにコンテンツが中央に配置され、ヘッダとフッタが横いっぱいに広がったデザインです。

ブラウザの幅を広げたキャプチャ

こういったデザインを採用しているサイトは多くありますが、この問題はブラウザのサイズが小さい場合のみなので気がつかないことがあります。

解決方法

解決方法は簡単です。サイズを指定していないヘッダとフッタに「min-width」プロパティを使用して、コンテンツエリアと同じ幅を指定します。

不具合版のCSS

#header {
	height: 100px;
	background: #ccc;
}

#content {
	width: 960px;
	margin: 0 auto;
	height: 600px;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
}

#footer {
	height: 100px;
	background: #ccc;
}

解決版のCSS

#header {
	height: 100px;
	background: #ccc;
	min-width: 960px;
}

#content {
	width: 960px;
	margin: 0 auto;
	height: 600px;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
}

#footer {
	height: 100px;
	background: #ccc;
	min-width: 960px;
}

「min-width」を使用すると、下記のようにヘッダとフッタが切れずに表示されます。

デモページ（解決版）

この方法の唯一の欠点はIE6だけ非対応なことです。IEの場合はJavaScriptを使用すると解決できると思いますが、そこまでする必要はないでしょう。