あるブロック要素の高さをブラウザいっぱいに広げる方法

あるブロック要素の高さをブラウザいっぱいに広げる

div要素などのブロック要素の高さをブラウザいっぱいに広げるには、広げたいボックスのheightを100％にしても広がりません。

これは親要素の高さが設定されてないためにデフォルトのauto、つまり内容領域があるだけの高さになるためです。

解決方法としては親の高さを100％にすれば良いことになります。
では、親要素とは？
どうやら「html」と「body」に対して100％を設定する事となります。

div要素の高さをいっぱいに広げるサンプルを見てみましょう。

サンプル

<div class="box1">box1</div>
<div class="box2">box1</div>

html, body {
	height: 100%;
}
.box1 {
	background-color: #0CF;
	float: left;
	height: 100%;
	width: 300px;
}
.box2 {
	background-color: #F60;
	float: left;
	height: 100%;
	width: 300px;
}