为什么CSS&HTML页面出现横向滚动条？附Flask网站代码示例

嘿，我来帮你排查下这个横向滚动条的问题，结合你的Flask网站场景，大概率是这几个原因之一：

1. 元素总宽度“撑破”视口（最常见） #

很多新手会踩这个坑：哪怕给元素设了width: 100%，如果加上padding或者border，元素的实际宽度就会变成100% + padding/border，直接超出视口宽度，自然就出现横向滚动条了。

比如你的#main_div如果在common.css里是这么写的：

#main_div {
  width: 100%;
  padding: 20px;
}

这时候它的左右padding加起来40px，总宽度就超过了视口，滚动条就来了。

解决办法很简单，给元素加上box-sizing: border-box，让padding和border都算在设定的宽度之内：

/* 全局设置，让所有元素都遵循这个规则，一劳永逸 */
* {
  box-sizing: border-box;
}

#main_div {
  width: 100%;
  padding: 20px;
}

2. 表单输入框宽度设置太“死板” #

你的登录表单里的用户名、密码输入框，如果设置了固定宽度（比如width: 350px），在窄屏手机上这个宽度很容易超过视口宽度，导致横向滚动。

建议改成相对宽度+最大宽度的组合，兼顾不同屏幕：

input[type="text"], input[type="password"] {
  width: 100%; /* 占满父容器宽度 */
  max-width: 350px; /* 宽屏上最多只到350px，不会太宽 */
}

3. 存在未处理的溢出内容 #

如果页面里有超长的无换行文本、大尺寸图片，或者绝对定位的元素超出了父容器范围，也会强行撑出滚动条。

比如如果有长文本，可以加个换行规则：

#main_div {
  word-wrap: break-word; /* 自动换行超长单词 */
}

要是有图片，记得限制最大宽度：

img {
  max-width: 100%;
  height: auto;
}

4. Viewport标签的小问题 #

虽然你已经加了viewport标签，但可以再检查下有没有拼写错误，标准的写法是：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果这里写错了（比如把device-width写成devicewidth），移动端的视口就会识别错误，也可能出现滚动条。

你可以先优先检查common.css里#main_div和表单元素的宽度、padding设置，这几乎是90%的横向滚动条问题根源~

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