こんにちは、オフィス狛 デザイン部のSatoです。
私がモバイル用サイトをコーディングする際、諸事情によりbodyタグにclassをつけられないことが多いです。
ですので、divタグで全体的な内容を囲んで背景色を設定していたりします。
そうなると、背景色をページごとに設定が必要サイトでSafariなどのiOSのブラウザで要素が少ないページを表示した場合に、下に余白ができたり余白をなくすためにheight:100vhを設定すると不要なスクロールができてしまうことが多々ありました。
不要なスクロールをなくすにはJSを書く必要がありましたが、CSSの新要素で解決できるようになったので、ご紹介します。
CSSの新要素、それは新しく追加された単位であるsvh・lvh・dvhです。
これら3つとも、ビューポートを基準にした単位ですがモバイルサイトをコーディングする際に困っていた部分を解決できる仕様になっています。
★svhはスモールビューポートです。
表示領域の高さが最小の際のサイズが基準になります。
height:100svhを設定すると、表示領域の高さが最小の時(アドレスバーが表示されている時)の高さになります。
★lvhはラージビューポートです。
表示領域の高さが最大の際のサイズが基準になります。
height:100lvhを設定すると、表示領域の高さが最大の時(アドレスバーの表示が小さい時)の高さになります。
★dvhはダイレクトビューポートです。
ブラウザの表示領域の動きに対し、動的に対応してくれます。この単位は今までの悩みを解決してくれるすごい単位です！
height:100dvhを設定すると、ブラウザの表示項目の表示・非表示に合わせサイズをフレキシブルに変更してくれます。
そして、min-height:100dvh;を設定することで、ブラウザの表示項目の表示・非表示に合わせサイズをフレキシブルに変更してくれるので画面の要素が少ない際は余分なスクロールが発生しない、かつ内容が画面に収まらない場合は下まで背景色がつくようになります！
どの単位も、今後スマートフォンサイトをコーディングする際に絶対に役に経ちますので、覚えておきたいですね。
CSS