このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

CSS: body の height を100%にしても上下に広がらない

このエントリーをはてなブックマークに追加
操作画面


こんにちは、さち です。

先日、サイト(ディスプレイ ドット抜けテスト)を作っているときに
ページを画面いっぱいに広げようとしていました。

そこで、body の height を100%にしました。
しかし、思った通りの動作をせず上手くいきません。

なんで?




bodyのheightを100%にしても広がらない

<body>
<div> div </div>
</body>

CSS で、bodydivheight を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 の設定が可能だったんですね。
今回の問題に遭遇するまで考えたこともなかったので勉強になりました。




このエントリーをはてなブックマークに追加




ブログ移転に伴い、コメント受付は終了しました。



記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ