CSS でスクロールバーなしでビューポートの幅を計算できますか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-08 09:27:02

オリジナル

876 人が閲覧しました

Can We Calculate Viewport Width Without Scrollbars in CSS?

CSS でスクロールバーを使用しないビューポートの幅の計算

質問: CSS だけを使用してスクロールバーを除いたビューポートの幅 (vw) を決定できますか?

答え: はい、CSS を使用してスクロールバーを考慮せずに vw を計算することができます。 1 つの方法では、calc() 関数を使用して、ビューポートの幅からスクロールバーの幅を減算します。

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

ログイン後にコピー

このコードでは、100vw はビューポートの全幅を表し、100% はスクロールバーなしのビューポートの幅を表します。 (100vw - 100%) 項は、スクロールバーの幅を効果的に計算し、100vw から減算します。

補足: この手法は、次の正方形の高さを計算するのにも適用できます。スクロールバーの幅を除いて、ビューポートの幅の半分を占めます。

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

ログイン後にコピー

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