解 説

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

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

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

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

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

サンプル