« Daily Link | Back To Blog Top | Daily Link »
height:100%で画面全体に表示させる方法
今日は、CSSのテクニック的な事を書こうと思います。
ネタはたくさんあるのですけど、いざWebに公開するとなると中々勇気が持てなくて、これまで余りそういった事は書きませんでした。
でもそれじゃあ折角Blogを公開している意味が無いので、今日からモリモリ書こうと思います。 へっぽこですけど、どうぞお付き合いください。
CSSを始めた頃によくある間違いで、heightに100%を指定しても反映されない、という物があります。
それは大抵の場合、
div {
height:100%;
border:dotted 2px #666666;
}
<div>100%になるかな？</div>
と、このような記述をしていると思います（サンプル）。
CSSの仕様として、heightを%で指定する際は、親要素のheightを基準にする、という流れになっています。
そしてheightの初期値はautoであり、autoの高さは、内容に依存します。
つまり、上記の記述では、一行分のheightしか表示されない事になります。
一方で正解は、
html,body { height:100%; }
div {
height:100%;
border:dotted 2px #666666;
}
<div>100%になりました！</div>
こうなります（サンプル）。
最親要素であるhtmlと、bodyからheightを指定しておく事が必要です。
TracBack
http://www.hamashun.com/mt/mt-tb.cgi/23
