如何计算CSS中不包括滚动条的视口宽度（vw）？

仅在 CSS 中计算不包括滚动条的视口宽度 (vw)

问题来了：CSS 能否单独确定不包括滚动条的 vw？考虑宽度为 1920px 的屏幕，其中 vw 返回 1920px。然而，实际的正文宽度约为 1903px。

要解决此差异，请使用 CSS calc() 函数。通过计算 100vw 减去 (100vw - 100%)，结果值表示不包括滚动条宽度的 vw。

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

此外，此技术还可以应用于高度计算。例如，要创建一个占据视口宽度的 50% 减去滚动条宽度的 50% 的正方形：

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

以上是如何计算CSS中不包括滚动条的视口宽度（vw）？的详细内容。更多信息请关注PHP中文网其他相关文章！