CSS 可以在沒有滾動條的情況下計算視窗寬度嗎？

使用CSS 測量沒有滾動條的視口寬度

是否可以利用CSS 來計算不包括滾動條的視口寬度(vw )？

各種使用者都會遇到 vw 值與實際正文寬度（不包括捲軸）之間的差異。例如，雖然螢幕解析度可能是 1920px，但 vw 傳回 1920px，儘管主體寬度更接近 1903px。

關鍵在於理解 CSS 中的 100% 寬度包含視窗和捲軸。為了隔離視口寬度，可以採用以下計算：

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

此計算從整個視口寬度中減去滾動條寬度，有效地提供沒有滾動條的所需寬度。

此外，此技術可以擴展到高度測量。例如，要建立一個佔據視窗 50% 的方形元素，同時排除捲軸，可以使用以下程式碼：

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

以上是CSS 可以在沒有滾動條的情況下計算視窗寬度嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！