分かりにくいCSS height のパーセント設定のまとめ

CSS にて、要素の height にパーセント値を指定した場合の表示について分かりにくいので簡単にまとめておきます。

要素をウインドウ全体に表示したいけど上手くいかない

要素を画面全体に表示したい場合、「height: 100%;」と指定しても上手くいきません。
たとえば以下のHTMLで、div を画面全体に表示したい場合、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  </head>
  <body>
    <div class="main">
    </div>
  </body>
</html>

div.main 要素を以下のように指定して、

div.main {
  height: 100%;
}

あれ、height の指定が全く効いていません。

div.main 要素をネストしてみます

div.main 要素を囲む div.wrapper を入れてみます。

    <div class="wrapper">
      <div class="main">
      </div>
    </div>

div.wrapper の高さも100%にして、わかりやすいように 5px でパディングしときます。

div.wrapper {
  height: 100%;
  padding: 5px;
}
div.main {
  height: 100%;
}

このようになります。さっきと一緒ですね。

div.wrapper のサイズを固定してみる

div.wrapper の高さを100pxに固定すると

div.wrapper {
  height: 100px;
  padding: 5px
}
div.main {
  height: 100%;
}

div.main は親要素の div.wrapper 内で 100% の高さで表示されます。
高さを詳しく見てみると、div.main の高さは 100px となっており、親要素で指定した高さの 100px が 100% で引き継がれています。

この時、div.wrapper の高さはパディング分を入れて 110px となります。

div.main の高さを 50% にしてみると

div.wrapper {
  height: 100px;
  padding: 5px;
}
div.main {
  height: 50%;
}

高さは 50px になります。

つまり、height のパーセント指定は、親要素の height の値を引き継ぐということが分かります。

じゃぁ、親要素の height が auto だったら

div.wrapper の高さ指定を auto 、つまりデフォルトですが、にしてみます。

div.wrapper {
  height: auto;
  padding: 5px;
}
div.main {
  height: 50%;
}

div.main は親要素と同じくheight: auto;として扱われます。

さて、一旦結論ですが

要素の高さをパーセンテージ指定すると、親要素の高さに対する割合で、自身の高さを決定するので、
ルート直下から html と body の高さを 100% 指定にすれば、

 * { margin: 0; }
html, body {
  height: 100%;
}
div.wrapper {
  height: 100%;
  padding: 5px;
}
div.main {
  height: 50%;
}

ウインドウいっぱいに広がりました。

なんかスクロールバーでちゃってますが、
これは、div.wrapper の高さは親要素である html と body の高さがウインドウサイズになっていて、div.wrapper の height がウインドウサイズとして引き継ぎ、パディングとして上下で 10px とられているためです。

div.wrapper のパディングを外すと、高さがウインドウサイズになります。

そして補足

一番最初の例のHTMLで DOCTYPE 宣言を url なしで定義すると、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  </head>
  <body>
    <div class="main">
    </div>
  </body>
</html>