CSS のスクロールバーを除いてビューポートの幅 (vw) を計算する方法は?

CSS のスクロールバーを除くビューポート幅 (vw) の計算

元の質問で述べたように、アカウンティングなしでビューポート幅 (vw) を取得します。スクロールバーについては、CSS だけを使用するのは難しい場合があります。ただし、これを実現できる calc() 関数を使用した回避策があります。

calc() では、100% はスクロールバーを含むビューポートの幅を表します。 100% と 100vw の差を引くことで、スクロールバーの幅を効果的に無視できます。

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

この式は、vw からスクロールバーの幅を引いた値に等しい幅を body 要素に割り当てます。

さらに、このアプローチは、本体の直接の子だけでなく、あらゆる要素に適用できます。たとえば、スクロールバーの幅を除き、ビューポートの 50% を占める正方形を作成するには:

<code class="css">.box {
  width: calc(50vw - ((100vw - 100%) / 2));
  height: 0;
  padding-bottom: calc(50vw - ((100vw - 100%) / 2));
}</code>

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