画面の高さいっぱいにDIV要素を張り巡らせる

yuusei — Tue, 12 Nov 2013 16:21:33 +0000

需要があるのかわかりませんが、たまに学生さんからの質問があるのでここに掲載しておきます。
セレクタやクラス、IDは各自で調整してくださいね。

html,body {
	height: 100%;
}

body {
	font-size: 100%;
	line-height: 160%;
	color: #000;
	text-align: center;
	background: #cccccc;
}

#container {
	margin: 0 auto;
	width: 1000px;
	height: 100%;
	min-height: 100%;
	text-align: left;
	background: #fff;
}

body > #container {
	height: auto;
}

jqueryを使う方法もありますが、シンプルにCSSだけで実現できることはCSSだけでしたほうが良いと思います。
何事もシンプルが一番です。

NPC工房ブログCSS »

画面の高さいっぱいにDIV要素を張り巡らせる