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

知らなきゃ絶対損する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 の設定が可能だったんですね。
今回の問題に遭遇するまで考えたこともなかったので勉強になりました。




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




管理人だけが読めるコメントにする(返信はしません)
【お知らせ】
  • コメントは承認制です。反映に時間がかかります。
  • スパムコメント防止のため一部ホストを規制中です。
  • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
  • 記事に直接関係ない個人のトラブルにはお答えできません。
  • Android は使用経験がないので質問を頂いても答えられません。
  • その他詳細はこちら





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

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

ブログパーツ