移动端页面设置#main容器width:100%出现水平滚动条的原因及适配方案咨询

这问题我在移动端开发里碰到过好多次，核心原因大多和CSS盒模型的默认行为、浏览器默认样式有关，咱们一步步拆解并解决：

为什么会出现水平滚动条？ #

当你给#main设置width:100%时，这个宽度默认只指元素的内容区宽度（CSS默认盒模型是content-box）。如果出现以下情况，容器总宽度就会超出视口：

• #main本身带有padding或margin（哪怕你设了border:0，padding/margin依然会额外占据空间）
• 浏览器默认给html/body添加了边距（比如Chrome中body默认有margin:8px）
• 子元素设置了固定宽度或绝对定位，超出了#main的范围

而你用overflow:hidden虽然能隐藏滚动条，但会把原本需要滚动显示的内容也切掉，自然影响其他功能。

有效的解决方案 #

1. 切换盒模型为border-box（最推荐） #

给元素设置box-sizing: border-box后，width属性会包含内容区、padding和border的总宽度，这样width:100%就不会因为padding/border超出父容器。

可以单独给#main设置：

#main {
  width: 100%;
  border: 0;
  box-sizing: border-box;
}

如果想全局避免这类问题，建议给所有元素统一设置：

* {
  box-sizing: border-box;
}

2. 重置html/body的默认边距 #

浏览器默认给html和body添加了margin，导致body的实际宽度小于视口。重置后，#main的width:100%就能完全适配视口：

html, body {
  margin: 0;
  padding: 0;
}

3. 限制子元素的最大宽度 #

如果是子元素溢出导致的滚动条，给子元素添加max-width:100%，让它不超出父容器的范围：

#main * {
  max-width: 100%;
}

总结 #

优先使用box-sizing: border-box配合重置html/body默认边距，这两个操作几乎能解决90%以上的移动端宽度溢出问题，而且不会像overflow:hidden那样影响页面的正常滚动和功能。

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