【CSS】ボックスを[height:100%;]で画面全体に表示させる方法。

Ads by Google

CSSを使ってボックスを画面全体に表示させたいとき、通常は[height:100%;]と指定するだけなのですが、なぜか思いどおりの高さにならず、1時間近くもハマってしまいました。

ウェブ制作者ならば誰もが一度は陥るであろうこの問題の解決策を、個人的な備忘録も兼ねて紹介します。

例えば以下のような html があったとします。

<html>
<head>
<title>ボックスを[height:100%;]で画面全体に表示させる方法。</title>
<body>
<div id="main">
<h1>親要素の高さに合わせる</h1>
親要素の高さに合わせるには親要素に具体的な高さが設定されている必要がある。
</div>
</body>
</html>

ここで <div id="main">〜</div> の高さをウィンドウのサイズに合わせたいとき。
一見すると body 要素の高さがウィンドウの高さに見えるので、CSS 側で次のように記述します。

#main {height:100%;}

これで <div id="main"> の高さがウィンドウの高さと同じになりそうですが、残念ながら、これは間違い。

なぜなら親要素の body タグのデフォルトの値は「100%」ではなく「auto」だからです。

つまり、#main の親要素である body にも「height:100%;」を指定しなければなりません。

body {height:100%;}
#main {height:100%;}

…これで解決か?
と安心してしまいそうですが、実はこれでもまだNG。

なぜならば、body の親要素にはさらに html が存在し、html の高さが、やはりデフォルトでは「100%」ではなく「auto」だから。

というワケで、最終的には以下のように CSS に記述する必要があります。

html {height:100%;}
body {height:100%;}
#main {height:100%;}

便宜上1つの要素ずつ記述しましたが、まとめると次のようになります。

html,
body,
#main {height:100%;}

ウェブサイトの制作中に不具合に見舞われハマってしまったときは、ぜひまた当サイトにお越しください。
でわでわ。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です