【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問題

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

コメント