设置body元素height为100%时出现水平滚动条问题求助

这个问题我碰到过好多次啦！当你给body设置height:100%时出现水平滚动条，核心原因其实是浏览器的默认样式在搞鬼，结合CSS盒模型的规则就能轻松解决：

问题根源 #

大部分浏览器的默认样式表（User Agent Stylesheet）会给body设置margin: 8px。而CSS盒模型默认是content-box模式——这意味着元素的总宽度 = 内容宽度 + padding + margin。

当你给body设置height:100%时，body的宽度默认是auto（即占满父元素html的宽度，也就是视口宽度），再加上左右各8px的margin，总宽度就会超出视口宽度，自然就出现了水平滚动条。

另外补充：如果html元素没设置height:100%，body的height:100%其实是基于html的高度，但html默认高度是由内容撑开的，不过这时候如果内容高度不够视口，body设100%会强制拉到视口高度，同时触发上面的margin溢出问题。

解决方案 #

这里给你两个实用的解决办法：

方案1：重置默认边距（推荐）

直接去掉body的默认margin，同时给html也设置height:100%，确保body的100%高度是基于视口：

html, body {
  height: 100%;
  margin: 0;
  /* 可选：加上这个，后续设置padding不会撑宽元素 */
  box-sizing: border-box;
}

如果需要给页面留边距，可以用padding代替margin，这样不会触发溢出。

方案2：隐藏横向溢出（不推荐，治标不治本）

如果你一定要保留body的margin，可以强制隐藏横向溢出，但这可能会导致页面内容被截断：

body {
  height: 100%;
  overflow-x: hidden;
}

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