分かりにくい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>
div.main {
  height: 100%;
}

大抵のブラウザはレンダリングエンジンが互換モードで動き、以下のように表示されます。

この辺が混乱させる原因なんですよね。。
標準モードと互換モードについてはこちらが詳しい





CSS3 スタンダード・デザインガイド

CSS3 スタンダード・デザインガイド