cssでheightに100%を指定しても高さが画面いっぱいにならない問題

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

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

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

よくある間違い

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

▼html

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

▼css

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

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

そもそも、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ということになります。デモはこちら↓

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

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

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

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

なぜか？

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

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

html,
body {
  height: 100%;
}

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

すると

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

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