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中文网其他相关文章！