« 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を指定しておく事が必要です。
8 Comment
死ぬほど助かりました；；
数時間奮闘してたんですが、bodyにはやっていたんですがhtmlにも必要とは思いつきませんでした・・・。
いやー
早くこの記事にめぐり合いたかった。
ずっと気になってたが、それでも何とか目測pxでごまかしてた（汗
こういう、基礎的でありながら見落としがちなことって案外記事として挙がってないんですよね。大変助かりました。感謝x2
こちらのほうが、more better ですよ～
html,body{
height:100%;}
#wrapper{
height:100%;
min-height:100%;}
body > #wrapper{
height:auto;}
ダメですね。
効きません。
虚偽の記事です。
ありがとうございます！！
htmlってcssと無関係だと思ってた私がはずかしいｗｗ
さすがです！！
なるほど！
Name:匿名 | 2011年04月04日 18:42