ファーストビューでコンテンツを画面いっぱいに広げて表示させるWebサイトが最近流行ってますね。例えばこういうサイト↓

こういうレイアウトを実現するためにはコンテンツの高さに対して「画面いっぱい」という指定が必要になります。古いieのサポートが切れた今だとheiht: 100vh;としてしまうのが手っ取り早いですが、諸事情でvhが使えないこともあるでしょう。

vhが使えなければ必然的に%を使うという流れになると思いますが、この%を使う時に押さえておくべきポイントがあるのでメモっておきます。

よくある間違い

さて、早速ですが下記のコードを見てください。

▼html

<div class="box">box</div>

▼css

.box {
  background-color: tomato;
  height: 100%;
}

見てわかる通り、boxというクラスをつけた要素が画面いっぱいに広がることを期待したコードです。特に問題なさそうに見えますが、このままだと.boxの高さは広がってくれません。こうですね↓

See the Pen height: 100%;のデモ1 by diwao (@diwao) on CodePen.

親要素にheightが必要

そもそも、height: 100%;とはどういう意味なのでしょうか。heightを%で指定した時、その値はhtmlにおける親要素のheightを基準に計算されます。例を見てみましょう。

▼html

<div class="parent">
  <div class="child"></div>
</div>

▼css

.parent {
  height: 100px;
}

.child {
  height: 50%;
}

上記の指定であれば、.childの高さは100px * 0.5で50pxということになります。デモはこちら↓

See the Pen height: 100%;のデモ2 by diwao (@diwao) on CodePen.

さて、では先ほどheight: 100%が効なかったコードですが、この場合、.boxのheightの基準となる親要素が何になるかというと……そうbodyタグですね。

先ほど、heightの%は親要素のheightを元に計算されると書きましたが、これは親要素の高さにpxや%が設定されている時のみ有効でして、autoの時には効きません。ここがハマりポイント。

で、先ほどの例だとbodyタグにはheightの指定がない。つまりデフォルトのautoが設定されているので、.boxに高さ100%と書いても「親のheightがわからないよー」ということで期待と異なる結果になってしまったわけです。

htmlタグにもheightを

height: 100%;が効かない原因はわかった。じゃあbodyにもheight: 100%;を指定すれば解決か、と思いきやまだこれでもうまくいきません。依然として.boxの高さはそのままです。

なぜか?

それは、bodyもまた「親のheightがわからないよー」となってしまっているからです。冷静に考えれば当たり前の話ですね。

bodyの親要素は言わずもがなhtmlです。では、早速htmlにもheight: 100%;を指定してみましょう。

html,
body {
  height: 100%;
}

.box {
  background-color: tomato;
  height: 100%;
}

すると

See the Pen height: 100%;のデモ3 by diwao (@diwao) on CodePen.

はい、こうですね。ちゃんと画面いっぱいに.boxを表示することができました。

つまり、画面いっぱいに広げる時はhtmlとbodyにもheight: 100%;が必要というわけですね。これ初心者のうちは知らずにハマりがちなポイントなので覚えておくといいと思います!