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

HTML&CSS

ページを画面いっぱいの高さにする方法です。
ポイントは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のようにコンテンツの内容がブラウザの高さよりも長くなった場合に問題がおこります。

サンプル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;
}

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

サンプル3

サンプル4

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました