如何確定 CSS 中不包括捲軸的視窗寬度 (vw)？

使用CSS 決定視口寬度(vw) 排除捲軸

如查詢中所述，僅計算不含滾動條的視口寬度(vw)透過CSS 實現可能具有挑戰性。傳統的 vw 測量包括滾動條佔用的空間。

不使用 JavaScript 的 CSS 解

但是，有使用 CSS 中的 calc 函數的解法。透過從100vw 減去100%（帶滾動條的視口寬度）和100vw（不包括滾動條的視口寬度）之間的差值，我們有效地消除了滾動條的寬度：

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

範例

例如視口寬度為1920px，捲軸佔17px，則結果：

100vw - (100vw - 100%) = 1920px - (1920px - 1903px) = 1903px

結論

透過使用這個計算表達式，可以在沒有滾動條的情況下計算視口寬度，從而更準確地表示實際可見區域。

以上是如何確定 CSS 中不包括捲軸的視窗寬度 (vw)？的詳細內容。更多資訊請關注PHP中文網其他相關文章！