"height: 100%" の要素が画面の高さ100%にならない場合の対応方法

  • 70
    いいね
  • 4
    コメント
この記事は最終更新日から1年以上が経過しています。

ページ内の特定の要素を「ブラウザ画面の高さ100%」で表示させたい場合を考えます。
(各要素は通常フローで配置されているものとします)

期待通りの表示にならないCSS

以下のようなCSS指定が思いつきますが、この場合 .fullheight 要素はブラウザ画面の高さ100%にはなりません。

Demo 1

CSS

body {
    margin: 0;
}

.fullheight {
    height: 100%;
    background: #bbddff;
}

HTML

<body>
<div class="fullheight">
高さ100%で表示したい要素
</div>
</body>

期待通りの表示となるCSS

以下のように、html要素とbody要素に height: 100%; を指定すると、期待通りの表示結果となります。

Demo 2

CSS

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

.fullheight {
    height: 100%;
    background: #bbddff;
}

HTML

<body>
<div class="fullheight">
高さ100%で表示したい要素
</div>
</body>

height に相対値(%)が指定された場合の高さの算出

このような height プロパティの振る舞いは、もちろんCSSの仕様として決められているものです。

height - CSS | MDN

ある要素の height に相対値(%)が指定された場合、その高さは包含ブロックの高さに対して計算されます。
その要素が通常フローで配置されており、かつ包含ブロックの高さが明示されていない場合、要素の高さは auto として計算されます。

なお、包含ブロックについては下記の記事が詳しいです。

包含ブロック|前提知識|CSS2.1

Demo 1 の例では、.fullheight の包含ブロックである <body> に height が明示されていなかったため、height: auto; と同様の結果となっていました。

包含ブロックに height が明示されている場合

.fullheight の包含ブロックとなる .wrapper を新たに設置し、height: 500px; を指定してみます。
さらに .fullheight に対しては height: 80%; と指定しましょう。

この場合、.fullheight 要素の高さは「500px の 80% = 400px」として計算されます。

Demo 3

CSS

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

.wrapper {
    height: 500px;
    background: #99bbee;
}

.fullheight {
    height: 80%;
    background: #bbddff;
}

HTML

<body>
<div class="wrapper">
<div class="fullheight">
高さ80%で表示したい要素
</div>
</div>
</body>


では、上記の Demo 3 の状態から、さらに要素をひとつ増やす(.inner)とどのような表示になるでしょうか?

Demo 4

CSS

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

.wrapper {
    height: 500px;
    background: #99bbee;
}

.inner {
    /* height指定無し */
}

.fullheight {
    height: 100%;
    background: #bbddff;
}

HTML

<body>
<div class="wrapper">
<div class="inner">
<div class="fullheight">
高さ80%で表示したい要素
</div>
</div>
</div>
</body>

Demo 3 と同じ結果になりそうな気もしますが、.fullheight の包含ブロックとなる .inner に height が明示されていないため、.fullheight の高さは auto として計算されます。

まとめ

通常フローで配置された height: 100%; の要素を「ブラウザ画面の高さ100%」で表示させたい場合、ブロックボックスを形成する祖先要素それぞれに対しても height: 100%; を指定する必要があります。