高さ100%のボックス-CSS TIPS

高さ100%のボックス

(X)HTMLにおいてブロックレベル要素のheightプロパティに対して%で値を指定した場合反映されません。
サンプル

CSSの仕様上%は親要素のheightに対しての割合で反映されるので、親要素に対して明示的にheightが指定されていない場合、height:autoが継承されるためです。

html要素とbody要素のheightプロパティに対して100%と明示的に指定しておく事によりheight100%のdiv要素を作成する事ができます。

html,body{
	height:100%;
}
div{
	height:100%;
}