ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS のスクロールバーを除いてビューポートの幅 (vw) を計算する方法は?

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-11-06 03:13:02367ブラウズ

How to Calculate Viewport Width (vw) Excluding the Scrollbar in CSS?

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。