HTML页面底部出现横向滚动条应如何隐藏？

问题根因 #

你给body设置的规则未生效、以及出现横向滚动条主要有两个核心原因：

1. 浏览器优先读取html根标签的溢出规则，仅给body加overflow-x: hidden不会生效
2. 你给body设置了固定宽度900px，当视口宽度小于900px时，body本身就会超出视口产生滚动条，同时子元素如果存在盒模型计算溢出、内容超宽也会触发滚动条

解决方案 #

1. 替换原有的body CSS规则，同时给html标签加溢出控制：

html {
  overflow-x: hidden;
}
body {
  max-width: 900px;
  margin: 0 auto;
}

把固定width改成max-width可以适配小屏设备，小于900px宽度的设备下页面会自动收缩，不会强制出现滚动条。
2. 全局统一盒模型，避免子元素宽度计算溢出：

* {
  box-sizing: border-box;
}

该规则会将元素的padding、border都计算在你设置的宽度范围内，不会出现设置width:100%之后因为加了内边距就超出父容器的问题。
3. 给代码块增加横向滚动，避免长代码撑宽容器：

pre {
  overflow-x: auto;
  padding: 12px;
}

如果完成以上步骤还有滚动条，可以排查是否有元素设置了负的左右margin值，这类设置也会导致元素超出容器宽度触发横向滚动条。

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