こんにちは、さち です。
先日、サイト（ディスプレイ ドット抜けテスト）を作っているときに、ページを画面いっぱいに広げようとしていました。
そこで、body の height を100％にしました。しかし、思った通りの動作をせず上手くいきません。
なんで？
bodyのheightを100％にしても広がらない
HTML
<body> <div> div </div> </body>
CSS
CSS で、body と div の height を100％に設定して、div を上下いっぱいに広げます。
body {
height: 100%;
margin: 0;
background-color: #FF6;// 黄色
}
div {
height: 100%;
margin: 0;
background-color: #E96;// 薄オレンジ色
color: #FFF;
}
表示結果
しかし、ページを表示した結果は下のとおり。この CSS では div が上下いっぱいに広がってくれません。
解決方法
原因は body にあります。
body の背景色が全体に付いているので上下いっぱいに広がっていると思いきや、たった 57.6px しかありません。くそぉー！だまされたぁーーー！！！！！！
通常、height は親要素の高さを100％としています。つまり、body の height を100％にしても上下に広がらない原因は、親要素の高さが狭いからです。
body の親要素は html ですね。ということで、CSS に html を追加して height を100％にすれば解決です。
html { height: 100%; margin: 0; } body { height: 100%; margin: 0; background-color: #FF6;// 黄色 } div { height: 100%; margin: 0; background-color: #E96;// 薄オレンジ色 color: #FFF; }
body が上下いっぱいに広がったので、div も上下いっぱいに広がりました。
ページを画面全体に広げるための CSS は、まとめて記述する方が手っ取り早いし見やすいですね。
html, body, div {
height: 100%;
margin: 0;
}
body {
background-color: #FF6;// 黄色
}
div {
background-color: #E96;// 薄オレンジ色
color: #FFF;
}
そもそも、html タグにも CSS の設定が可能だったんですね。今回の問題に遭遇するまで考えたこともなかったので勉強になりました。
コメント