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%;}

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

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

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

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

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

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

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

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法