267
206

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2015-08-03

ページ内の特定の要素を「ブラウザ画面の高さ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%; を指定する必要があります。

267
206
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
267
206

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?