200
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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

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

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

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

CSS

body {
  margin: 0;
}

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

HTML

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

See the Pen qiita_205fed63b886681661bd_01 by Sho Uchida (@shouchida) on CodePen.

期待通りの表示となるCSS

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

CSS

html {
  height: 100%;
}

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

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

HTML

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

See the Pen qiita_205fed63b886681661bd_02 by Sho Uchida (@shouchida) on CodePen.

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

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

height - CSS | MDN

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

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

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

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

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

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

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

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>

See the Pen qiita_205fed63b886681661bd_03 by Sho Uchida (@shouchida) on CodePen.


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

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>

See the Pen qiita_205fed63b886681661bd_04 by Sho Uchida (@shouchida) on CodePen.

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

まとめ

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
200
Help us understand the problem. What are the problem?