如何让固定宽度容器的背景色撑满页面宽度？（HTML、CSS）

问题根源 #

你之前的伪元素方案出现横向滚动条，核心原因有两个：

• 100vw 会包含垂直滚动条的宽度，导致伪元素实际宽度超出页面可显示区域
• 若.promo未设置position: relative，伪元素的绝对定位会相对于文档根节点，定位逻辑容易出现偏差

修复方案 #

方案一：优化伪元素实现 #

先给.promo设置相对定位，让伪元素以它为基准定位，同时调整伪元素的写法，避免固定高度，让背景自适应容器高度：

.promo {
  position: relative;
  /* 保留你的固定宽度配置，比如：
  max-width: 1150px;
  margin: 0 auto;
  */
}

.promo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0; /* 自动适配.promo的高度，替代固定height: 680px */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-color: #f9f9f9;
  z-index: -1; /* 确保背景在内容下方，不遮挡文字和交互元素 */
}

然后在全局样式中添加，隐藏横向溢出：

html {
  overflow-x: hidden;
}

方案二：嵌套容器实现（无需伪元素） #

如果觉得伪元素逻辑复杂，也可以用嵌套容器的方式，更直观：

1. 给原.promo套一个全宽的父容器，设置背景色
2. 原.promo保持固定宽度居中即可

修改后的HTML：

<section class="promo-bg">
  <div class="promo">
    <div class="promo__wrapper">
      <h1 class="promo__wrapper-title">Милые штуки ручной работы для дома</h1>
    </div>
    <div class="promo__add">
      <a class="promo__choice" href="#"><span class="promo__choice-description">Предметы интерьера</span>
        <svg class="promo__choice-lamp" width="40" height="62">
          <use xlink:href="./img/sprite.svg#lamp-icon"></use>
        </svg>
      </a>
      <a class="promo__choice" href="#"><span class="promo__choice-description">Детские игрушки</span>
        <svg class="promo__choice-cube" width="60" height="60">
          <use xlink:href="./img/sprite.svg#toy-icon"></use>
        </svg>
      </a>
    </div>
    <picture>
      <source media="(min-width: 1150px)" width="1150" height="34" srcset="./img/icons/wave-desktop.svg">
      <source media="(min-width: 768px)" width="768" height="24" srcset="./img/icons/wave-tablet.svg">
      <img class="promo__wave">
    </picture>
  </div>
</section>

对应的CSS：

.promo-bg {
  background-color: #f9f9f9;
  width: 100%;
}

.promo {
  max-width: 1150px; /* 你的固定宽度 */
  margin: 0 auto;
  /* 原有样式 */
}

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