スマホでも100vhを安定させる方法

はじめに

コンテンツの高さを100vhで指定した時に、pcだと問題なくても、スマホだとレイアウトが崩れることがある。
原因は、アドレスバーやキーボードなどがviewportの高さを圧迫してしまうから。
この記事では、スマホでも100vhを維持してレイアウトを崩さない方法をjsを使ってご紹介したいと思います。

ウィンドウの高さを取得して、min-heightで指定する

height:100vh;では、高さが可変してしまいますが、min-heightで指定してあげれば、それ以下のサイズになることはありません。

index.js

let sp_height = window.outerHeight;
document.documentElement.style.setProperty("--sp_height", `${sp_height}px`);

まず、１行目の記述でスマホのwindowの高さをwindow.outerHeight¹で取得して、変数sp_heightに代入します。取得した高さsp_heightは、２行目の記述で、cssのカスタムプロパティ--sp_heightに代入します。

index.css

.sp_height{
  height: 100vh;
  min-height: var(--sp_height);
}

cssで、var(--sp_height)とカスタムプロパティを記述することで、値を動的に扱うことができます。
これにより、jsで取得した高さをcssに反映することができました！

まとめ

今回のやり方でmin-heightを指定することで、アドレスバーやキーボードによってviewportが圧迫されたとしても、ウィンドウの高さ分はコンテンツの最低高として確保されるのでレイアウトが崩れる心配がありません。100vh指定は、スマホだと表示崩れなどが懸念されますが、回避策はいくつかあると思いますので今回記事で紹介した内容も一つの対策として、皆様の参考になれば幸いです。

---

1. window.innerHeightと違い、アドレスバーも含めたwindow全体の高さを取得できる。 ↩