CSS はスクロールバーなしでビューポートの幅を計算できますか?

CSS を使用したスクロールバーなしのビューポートの幅の測定

スクロールバーを含めずに CSS を利用してビューポートの幅 (vw) を計算できますか?

さまざまなユーザーが、vw 値とスクロールバーを除いた実際の本文の幅との間に不一致を経験しています。たとえば、画面の解像度が 1920 ピクセルである場合、本体の幅が 1903 ピクセルに近いにもかかわらず、vw は 1920 ピクセルを返します。

重要なのは、CSS の 100% の幅がビューポートとスクロールバーの両方を含むことを理解することにあります。ビューポートの幅を分離するには、次の計算を使用できます:

body {
  width: calc(100vw - (100vw - 100%));
}

この計算は、ビューポート全体の幅からスクロールバーの幅を減算し、スクロールバーなしで目的の幅を効果的に提供します。

さらに、この手法は高さの測定にも拡張できます。たとえば、スクロールバーを除いてビューポートの 50% を占める正方形の要素を作成するには、次のコードを使用できます:

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}

以上がCSS はスクロールバーなしでビューポートの幅を計算できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。