vw单位与Grid布局异常：footer中50vw宽度未达预期

以下是几个可能导致这个问题的常见原因及验证方法：

• 浏览器滚动条的干扰
  vw 是基于视口宽度计算的，而部分浏览器（如Chrome）的垂直滚动条会占据视口的横向空间。如果页面出现滚动条，body 或 footer 的父元素实际宽度会是 100vw - 滚动条宽度，这时候设置 width:50vw 的元素，宽度会比父元素的一半（即50%）要宽，视觉上就会显得没有对齐到页面一半的位置。

  验证方法：临时隐藏滚动条（body::-webkit-scrollbar { display: none; }），查看元素是否能精确占满一半宽度；或者在开发者工具中对比 window.innerWidth（视口宽度）和 footer 父元素的 offsetWidth。

• 父元素的宽度限制或overflow设置
  如果 footer 的父元素（比如 body 或某个容器）设置了 overflow-x: hidden、width: calc(100vw - Xpx) 这类限制，或者因为 box-sizing: content-box 加上 padding/margin 导致实际宽度小于100vw，那么 50vw 是基于视口的宽度，而 50% 是基于父元素的实际宽度，二者自然会出现差异。

  验证方法：检查父元素的 width、padding、margin 和 box-sizing 属性，确保父元素的宽度确实等于视口宽度。

• 像素取整的视觉差异
  部分浏览器在处理非整数像素的vw计算时，会做像素取整处理，导致显示上的细微偏差。而百分比是基于父元素的精确宽度计算，取整逻辑更贴合父元素的布局，所以视觉上会更精准。

• Grid布局的间接影响
  虽然你看到main中的Grid元素宽度一致，但如果Grid容器（如上层的body或wrapper）设置了 width: 100% 却没有配合 box-sizing: border-box，可能会因为容器的padding/margin导致整体宽度超出视口，间接让footer的可用宽度变小，这时候vw的计算和父元素的实际宽度就不匹配了。

建议先从滚动条和父元素宽度这两点排查，这是最常见的触发场景。

内容的提问来源于stack exchange，提问作者Davide Cervati