【CSS】100vhと100%の違い！はみ出る原因について解説！

CSSで要素の高さを指定するときに height: 100vh や height: 100% を使うことがあります。

これらの違いはご存じでしょうか？

この記事ではheight: 100vhとheight: 100%の違いや特徴について、以下の内容をサンプルコードや図を用いてわかりやすく解説しています。

height: 100vhとは
height: 100%とは
height: 100vhのvhの特徴
- 親要素の高さの影響を受けない
- 100vhはアドレスバーが表示されると、要素が隠れる（はみ出る）
height: 100%の%の特徴
- 親要素に高さが明示的に設定されていないと無効になる
height: 100vhとheight: 100%の違い

height: 100vhとは

height: 100vhのvhはブラウザで表示されている領域（ビューポート）の高さを基準にした単位です。

height: 1vh
- ビューポートの高さの1%
height: 100vh
- ビューポートの高さの100%。

つまり、ビューポート全体の高さを持つ要素を作りたいときにheight: 100vhを指定します。

補足

vhはviewport heightの略です。
ビューポートの大きさは、ブラウザのウィンドウのサイズやスマホ・タブレットの画面サイズによって変わります。ウィンドウの大きさを変えたり、スマホやタブレットを横向き・縦向きに回転したりすると、ビューポートも変わります。

height: 100vhのサンプルコード

実際にHTML・CSS・ブラウザ表示結果でheight: 100vhの特徴を確認してみましょう。

HTML

<div class="fullscreen">
  height: 100vh
</div>

CSS

.fullscreen {
  height: 100vh;
  background-color: lightblue;
}

ブラウザ表示結果

.fullscreen要素はheight: 100vhを指定しているので、ビューポートの高さいっぱいに広がります。

height: 100%とは

height: 100%の%は親要素の高さを基準にした高さです。

height: 1%
- 親要素の高さの1%
height: 100%
- 親要素の高さの100%

となります。

height: 100%のサンプルコード

実際にHTML・CSS・ブラウザ表示結果でheight: 100%の特徴を確認してみましょう。

HTML

 <div class="parent">
   <div class="child">height: 100%</div>
 </div>

CSS

.parent {
  height: 200px;
  background-color: lightgray;
}

.child {
  height: 100%;
  background-color: lightblue;
}

ブラウザ表示結果

.child要素はheight: 100%を指定しているので、高さは親要素（.parent）の高さ（200px）の100%（200px）になります。

height: 100vhのvhの特徴

height: 100vhのvhには以下の特徴があります。

親要素の高さの影響を受けない
100vhはアドレスバーが表示されると、要素が隠れる（はみ出る）

親要素の高さの影響を受けない

vhは親要素の高さの影響を受けません。以下にHTML・CSS・ブラウザ表示結果を示します。

HTML

<div class="parent">
  <div class="child">height: 100vh</div>
</div>

CSS

.parent {
  height: 200px;
  background-color: lightgray;
}

.child {
  height: 100vh;
  background-color: lightblue;
}

ブラウザ表示結果

親要素（.parent）の高さは200pxですが、height: 100vhを指定している子要素（.child）の高さはビューポートの高さの100%になります。その結果、親要素の高さ200pxを超えてしまう可能性があります。

100vhはアドレスバーが表示されると、要素が隠れる（はみ出る）

100vhはアドレスバーの高さを無視している高さなので、モバイル端末でアドレスバーが表示された際に問題があります。

アドレスバーが下に表示されている端末の場合、要素がアドレスバーに隠れてしまいます。また、アドレスバーが上に表示されている端末の場合、要素がはみ出てしまいます。そのため、スクロールしないと隠れた部分を見ることができません。

この対策方法について次に説明します。

対策（100svh、100lvh、100dvhを使う）

CSSの新しい単位である100svh (Small Viewport Height)、100lvh (Large Viewport Height)、100dvh (Dynamic Viewport Height)を使うと、モバイルでも正しい高さを維持できます。

100dvh、100svh、100lvh、100dvhの違いを以下に表形式でまとめました。

単位	意味	特徴
`100vh`	ビューポートの高さの100%	アドレスバーを含む高さ
`100svh`	最小のビューポート高さ100%	アドレスバーが表示されているときの最大の高さ
`100lvh`	最大のビューポート高さ100%	アドレスバーが隠れたときの最大の高さ
`100dvh`	動的に変わるビューポートの高さ100%	現在のビューポートの高さに適応

以下に示すように、height: 100vhとheight: 100dvhを併用し、height: 100dvhの方を後に記述すれば、動的に変わるビューポートの高さにも対応できます（CSSの適用順序は後に書かれたものが有効になるため）。height: 100svhとheight: 100lvhを併用してもよいと思います。

CSS

.fullscreen {
  height: 100vh;  /* 従来のビューポートの高さ */
  height: 100dvh; /* 動的なビューポートの高さ（アドレスバーの表示・非表示に対応） */
}


↓ height: 100svhとheight: 100lvhも併用した場合
.fullscreen {
  height: 100vh;  /* 従来のビューポートの高さ */
  height: 100svh; /* 最小のビューポートの高さ（アドレスバーが表示された状態） */
  height: 100lvh; /* 最大のビューポートの高さ（アドレスバーが消えた状態） */
  height: 100dvh; /* 動的なビューポートの高さ（アドレスバーの表示・非表示に対応） */
}

height: 100%の%の特徴

height: 100%の%には以下の特徴があります。

親要素に高さが明示的に設定されていないと無効になる

親要素に高さが明示的に設定されていないと無効になる

%は親要素に高さが明示的に設定されていないと、無効になります。以下にHTML・CSS・ブラウザ表示結果を示します。

HTML

<div class="parent">
  <div class="child">height: 100%;</div>
</div>

CSS

.parent {
  background-color: lightgray;
}

.child {
  height: 100%;
  background-color: lightblue;
}

ブラウザ表示結果

height-100%の%の特徴(親要素に高さが明示的に設定されていないと無効になる)

CSSにおいて、height: 100%は親要素の高さを基準に計算されます。しかし、親要素（.parent）に高さが指定されていない場合、子要素（.child）の高さは内容に応じて自動調整される（auto）ため、height: 100%は無効になります。

height: 100vhとheight: 100%の違い

height: 100vhとheight: 100%の違いを以下に示します。

指定方法	基準	親要素の影響	一般的な用途
`height: 100vh`	ビューポートの高さ	影響を受けない	フルスクリーンのセクション
`height: 100%`	親要素の高さ	親要素の高さが必要	フレックスボックスの子要素や、コンテンツの自動調整

本記事のまとめ

この記事ではheight: 100vhとheight: 100%について、以下の内容を説明しました。

height: 100vh
- ビューポートの高さを基準にする
- 要素の高さに影響を受けない
- height: 100vhはモバイル端末でアドレスバーの影響を受けるため要注意
- 解決策として100dvh, 100svh, 100lvhを活用するとモバイルでも正しく表示できる
- height: 100vhはフルスクリーンレイアウトに最適
height: 100%
- 親要素の高さを基準にする
- 親要素に高さが設定されていないと無効になる
- フレックスボックスやグリッドレイアウトでよく使われる

お読み頂きありがとうございました。