CSSの単位のsvh,lvh,dvhを使ってみる

CSSのビューポート単位のうち、svhとlvh、dvhについて試してみます。

対応ブラウザ

対応ブラウザはこちらで、主要なブラウザで特に問題なくサポートされています。

svh

svhは小ビューポート単位(Small viewport units)のうちの高さの単位で、ブラウザのUIが展開した状態(アドレスバーなどが表示された状態)を基準として、その1%分のサイズになります。
小ビューポート単位の接頭辞はsvで、幅の単位はsvwになります。

例として、100svhの表示を試してみます。

.sample {
  height: 100svh;
}

svhのデモページ

この場合はアドレスバーなどが表示された状態を基準にするので、アドレスバーが表示されている場合は画面高さぴったりに要素が表示されます。

ただアドレスバーが隠れている場合、隠れているUI分だけ高さが足りない状態になります。

lvh

lvhは大ビューポート単位(Large viewport units)の高さの単位で、ブラウザのUIが縮小した状態(アドレスバーなどが隠れた状態)を基準として、その1%分のサイズになります。

100lvhの表示を試してみます。

.sample {
  height: 100lvh;
}

lvhのデモページ

lvhの場合はアドレスバーなどが隠れた状態を基準にするので、アドレスバーが隠れている場合は画面高さぴったりに要素が表示されます。

ただアドレスバーが表示されている場合、表示されたUI分だけ高さがはみ出た状態になります。

dvh

dvhは動的ビューポート単位(Dynamic viewport units)の高さの単位で、ブラウザのUIが動的に展開・縮小した際に合わせて自動的に調整された状態を基準に、その1%分のサイズになります。

100dvhの表示を試してみます。

.sample {
  height: 100dvh;
}

dvhのデモページ

dvhの場合は動的に調整されるので、アドレスバーが表示されていても隠れていても画面高さぴったりに要素が表示されます。

今回はiOSのキャプチャを掲載していますが、Androidで確認した際も挙動としては同じでした。