ホームページ >ウェブフロントエンド >CSSチュートリアル >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 サイトの他の関連記事を参照してください。