ページの高さを画面いっぱいにする

ページを画面いっぱいの高さにする方法です。
ポイントはCSSでhtml要素とbody要素をあらかじめ100%指定しておきます。
heightをパーセント指定するときは親要素のheight指定が必要になります。

次の例はpositionで指定された固定のheaderとfooterが存在し、コンテンツの高さがブラウザいっぱいに広がっているものです。
ヘッダーとフッターはposition:fixedで固定します。
次に、html,bodyと#containerのheightを100%にします。

サンプル1
HTMLコード

<header>header</header>
<div id="container">
コンテンツ内容
</div>
<footer>footer</footer>

CSSコード

html,body {
	height: 100%;
}

body {
	background: #cccccc;
}

#container {
	height: 100%;
	background:#FFC;
	margin:50px 0;
}

header{
	background:green;
	color:#fff;
	width:100%;
	height:50px;
	text-align:center;
	line-height:50px;
	position:fixed;
	top:0;
}
footer{
	background:green;
	color:#fff;
	width:100%;
	height:50px;
	text-align:center;
	line-height:50px;
	position:fixed;
	bottom:0;
}

サンプル1を見ていただくとわかるとおりこれでうまくいったように思えます。

けれども、次のサンプル２のようにコンテンツの内容がブラウザの高さよりも長くなった場合に問題がおこります。

サンプル2
コンテンツの部分の背景色が無く、bodyの背景色グレーが見えてきます。

この対策として次のようにCSSを設定します。

html,body {
	height: 100%;
}

body {
	background: #cccccc;
}

#container {
	height: 100%;
	min-height: 100%;
	background:#FFC;
	margin:50px 0;
}

body > #container {
	height: auto;
}
header{
	background:green;
	color:#fff;
	width:100%;
	height:50px;
	text-align:center;
	line-height:50px;
	position:fixed;
	top:0;
}
footer{
	background:green;
	color:#fff;
	width:100%;
	height:50px;
	text-align:center;
	line-height:50px;
	position:fixed;
	bottom:0;
}

この対策を行うことでコンテンツの高さが短いサンプル３であっても、コンテンツの高さがブラウザの高さより長いサンプル4の場合でも対応できます。

サンプル３

サンプル４