☰

スクロールバーなしでビューポート幅 (vw) を計算することは可能ですか? [重複] 質問する

tag-icon • tag-icon css viewport-units
スクロールバーなしでビューポート幅 (vw) を計算することは可能ですか? [重複] 質問する

タイトルにもあるように、vwスクロールバーなしで CSS のみで計算することは可能ですか?

たとえば、私の画面の幅は です1920px。vwは を返します1920px。しかし、実際の本体の幅は 程度しかありません1903px。

CSS のみを使用して値を取得する方法はありますか1903px( の直接の子だけでなくbody)、それともこれには JavaScript が絶対に必要ですか?

ベストアンサー1

これを行う 1 つの方法は、calc を使用することです。私の知る限り、100% はスクロールバーを含む幅です。つまり、次のようにします。

body {
  width: calc(100vw - (100vw - 100%));
}

100vw からスクロールバーの幅を引いた値が得られます。

たとえば、ビューポートの 50% の正方形 (スクロールバーの幅の 50% を引いたもの) が必要な場合は、高さでもこれを行うことができます。

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}

おすすめ記事