浏览器底部出现横向滚动条时HTML/CSS宽度异常问题求助

问题描述 #

开发网站时遇到宽度异常问题：页面加载且浏览器最大化时，底部的#facts-block元素背景可铺满全屏；但调整窗口使浏览器出现横向滚动条后，该div的背景在可视区域边缘截断，后续区域显示白色，无法完全铺满。

原因分析 #

问题核心在于body的宽度设置和内容容器的最小宽度限制：

1. body设置了width:100%，这个值对应的是浏览器视口的宽度，而非页面内容的实际宽度。当内容容器（如#content-wrapper、#facts-block-wrapper）设置了min-width:1200px，窗口缩小到小于1200px时，容器会撑出横向滚动条，但body的宽度仍停留在视口宽度，不会跟随内容扩展。
2. #facts-block设置了width:100%，这个百分比是相对于父元素body的宽度，因此背景只能覆盖到body的宽度（即视口宽度），超出部分自然显示白色。

解决方案 #

方案一：移除body的width限制（推荐） #

修改body的CSS，去掉width:100%，让body作为块级元素自动适应内容宽度：

body {
  background-color: #FFFFFF;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: "Lato", Helvetica Neue, sans-serif;
  font-weight: 300;
  margin: 0px;
  /* 移除width:100%，块级元素默认宽度为auto，会自动匹配内容宽度 */
  text-align: left;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

方案二：给body设置最小宽度 #

如果希望页面最小宽度和内容容器保持一致，可给body添加min-width:1200px（和内容容器的min-width值相同）：

body {
  background-color: #FFFFFF;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: "Lato", Helvetica Neue, sans-serif;
  font-weight: 300;
  margin: 0px;
  width: 100%;
  min-width: 1200px; /* 匹配内容容器的最小宽度 */
  text-align: left;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

额外优化建议 #

HTML中存在多个重复的id（如多个#facts-block-item、#facts-block-content等），这违反了HTML规范（id必须唯一），建议将这些重复的id改为class，例如：

<!-- 修改前 -->
<div id="facts-block-item">...</div>
<!-- 修改后 -->
<div class="facts-block-item">...</div>

对应的CSS也要调整为类选择器：

.facts-block-item {
  font-size: 0px;
  display: inline-block;
  margin: 0px;
  width: 25%;
  padding: 40px 0px;
  text-align: left;
}

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