見出し画像

width: 100vwを避けた方がいい理由と、jQueryでのカスタムプロパティの上書き

いずみ

vw・vhが登場し、cssのみで画面の幅と高さが取得出来るようになって久しいですが、この２つの値は若干の問題があります。


width: 100vw; は要素の幅をブラウザ幅と同じにする事が出来ますが、100vwはスクロールバーの幅も含まれます。

スクロールバーの幅分要素がはみ出すため、横スクロールが発生してしまいます。


height: 100vh; は要素の高さをブラウザの高さを同じにする事が出来ますが、これはブラウザすべてを含む高さになります。

iOSでサイトを閲覧する場合にアドレスバーやステータスバーの分、要素の高さがはみ出してしまいます。


heightの問題は簡単に解決出来るようで、

.hoge{
  height: 100vh;
  height: 100dvh;
}

これで、アドレスバーがある場合と、無い場合を考慮して要素を画面の高さにする事が出来ます。


幅の場合ですが、カスタムプロパティとjavascript(jQuery)を使った方法を紹介したいと思います。
コードはコチラ↓

/*---------------------------------
style.css
---------------------------------*/

:root{
  --vw: 1vw;
}
function setVw(){
//--vwをセットする関数

  let vw = $(window).width() / 100 + 'px';
  //ブラウザ幅/100を取得し変数vwに格納

  $(':root').css('--vw', vw);
  //:rootのカスタムプロパティ--vwにvwを代入させる。これで、スクロールバーの幅を除いた画面幅/100が--vwになる
}

$(window).on('load resize', function(){
  setVw;
});
//画面を、読み込んだ時・サイズを変えた時  →  関数vwが動作する

あとは、cssで--vwに数字をかけてやればokです

/*---------------------------------
style.css
---------------------------------*/

.size-100{
  width: calc(var(--vw) * 100);
}
.size-50{
  width: calc(var(--vw) * 50);
}

いかがでしたでしょうか。
vwの方は width: 100%; でもいいのではと思いましたが、ラッパーに内包されている子要素を全画面にしたいと思った時に、この方法なら楽に行えます。

コチラの記事を参考にさせていただきました。


この記事が気に入ったらサポートをしてみませんか？