如何让container类下的蓝灰头部背景全屏且文本布局不变？

这种「容器内元素背景撑满全屏，但内容保持容器对齐」的需求在响应式开发里特别常见，我给你分享两种简单易维护的方案，你可以根据项目情况选择：

方案一：伪元素实现全屏背景（无需改动DOM结构） #

如果不想调整现有HTML结构，这个纯CSS方案最适合：

现有HTML结构（无需修改） #

<div class="container">
  <header class="page-header">
    <h1>头部标题文本</h1>
    <p>头部的描述内容</p>
  </header>
  <!-- 页面其他内容 -->
  <main>...</main>
</div>

CSS代码 #

.container {
  max-width: 1200px; /* 你的容器最大宽度 */
  margin: 0 auto;
  padding: 0 20px; /* 容器左右内边距 */
}

.page-header {
  position: relative;
  padding: 30px 0; /* 头部内容的上下内边距 */
}

/* 用伪元素生成全屏背景 */
.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #5a6b7d; /* 你的蓝灰色背景 */
  z-index: -1;
  /* 关键：把伪元素左右边界拉到视口边缘 */
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
}

方案二：拆分背景层与内容层（逻辑更清晰） #

如果项目结构允许微调，这种方案可读性更强，后期维护更省心：

调整后的HTML结构 #

<!-- 全屏背景的外层容器 -->
<div class="header-bg">
  <div class="container">
    <header class="page-header">
      <h1>头部标题文本</h1>
      <p>头部的描述内容</p>
    </header>
  </div>
</div>

<!-- 页面其他内容依然在container内 -->
<div class="container">
  <main>...</main>
</div>

CSS代码 #

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 全屏背景容器 */
.header-bg {
  background-color: #5a6b7d;
  width: 100%;
}

.page-header {
  padding: 30px 0;
}

两种方案都能完美实现你的需求：头部文本保持在container的布局范围内，背景却能铺满整个浏览器宽度。方案一适合不想动现有DOM的场景，方案二更直观易懂~

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