【SCSS/CSS🔰】KVで画面いっぱいに画像を表示させたい！vhではなくdvhを使う

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

画面いっぱいに画像を表示させる方法

  background-image: url(/img/bg-top-kv.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: calc(100dvh - var(--header-hight-sp));

100vhだと「100vh問題」（アドレスバーの表示/非表示などによって高さが変わってしまう）があり100dvhにする。

100vh問題

• スマホのアドレスバー問題
  • 下が少し切れる
  • 謎のスクロールが出る
  • ボタンが見切れる
• コンテンツが増えるとはみ出す
• ヘッダーとの二重計算
• ブラウザのズームや文字サイズ変更に弱い
• タブレット横向きで高さ不足