Mac系统滚动条常驻时如何修复CSS布局header与main不对齐问题

问题根因 #

错位是100vw的单位特性导致的：

• 100vw统计的是整个视口的总宽度，包含系统滚动条的占用宽度
• 当Mac设置滚动条常开时，纵向滚动条会占据10-15px左右的视口空间，常规块级元素（body、main等）的width: 100%默认统计的是排除滚动条后的可用宽度
• 两者宽度计算逻辑不一致，导致header内部margin: auto居中的.wrapper，和同样margin: auto居中的main元素出现位置偏移。

解决方案 #

方案1：修改header的宽度属性（最推荐） #

直接把header的width: 100vw替换为width: 100%即可。fixed定位元素在没有特殊父级上下文（transform、filter等属性）的情况下，百分比宽度会和常规元素保持一致，统计排除滚动条后的可用宽度，两者居中逻辑自然对齐：

header{
  position: fixed;
  top: 0;
  left: 0;
  /* 替换原有width: 100vw */
  width: 100%;
  height: 58px;
  background-color: #3d3d3d;
}

方案2：统一滚动条显示规则 #

主动强制页面始终显示滚动条，提前占位避免不同系统、不同设置下的布局差异：

html {
  overflow-y: scroll;
}

方案3：动态扣除滚动条宽度（特殊场景兼容） #

如果业务必须使用vw做宽度计算，可以手动扣除滚动条宽度，也可以搭配JS动态获取实际滚动条宽度赋值给CSS变量做兼容：

header{
  width: calc(100vw - var(--scrollbar-width, 15px));
}

修改完成后，无论Mac滚动条设置为常开还是滚动时显示，header和main的对齐逻辑都能保持一致。

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