CSS でスクロールバーを除いたビューポートの幅 (vw) を決定するにはどうすればよいですか?

CSS を使用してスクロールバーを除外するビューポートの幅 (vw) を決定する

クエリで述べたように、スクロールバーのみを使用せずにビューポートの幅 (vw) を計算します。 CSS を使用するのは難しい場合があります。従来の vw 測定には、スクロールバーが占有するスペースも含まれます。

JavaScript を使用しない CSS ソリューション

ただし、CSS の calc 関数を使用する回避策が存在します。 100% (スクロールバーを含むビューポートの幅) と 100vw (スクロールバーを除くビューポートの幅) の差を 100vw から減算することで、スクロールバーの幅を効果的に削除します。

<code class="css">body {
  width: calc(100vw - (100vw - 100%));
}</code>

例

たとえば、ビューポートの幅が 1920px で、スクロールバーが 17px を占める場合、結果は次のようになります:

100vw - (100vw - 100%) = 1920px - (1920px - 1903px) = 1903px

結論

この計算式を利用すると、スクロールバーなしでビューポートの幅を計算でき、実際の表示領域をより正確に表現できます。

以上がCSS でスクロールバーを除いたビューポートの幅 (vw) を決定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。