REACT中容器内两个DIV背景色占满对应侧屏幕剩余空间的最优实现方案

方案1：伪元素延伸法（兼容性最优） #

这是目前通用性最强、适配成本最低的实现方式，不需要调整原有栅格布局逻辑，仅通过CSS伪元素实现背景延伸效果。

实现原理 #

给两个目标div分别添加绝对定位的伪元素，将伪元素向对应侧延伸100%视口宽度，继承当前div的背景色，层级放在内容下方即可。

代码示例 #

HTML结构

<!-- 原有栅格容器无需修改 -->
<div class="container">
  <div class="box a">左侧内容A</div>
  <div class="box b">右侧内容B</div>
</div>

CSS代码

/* 原有栅格容器样式 */
.container {
  max-width: 1200px; /* 你的栅格最大宽度 */
  margin: 0 auto;
  display: flex;
  overflow-x: clip; /* 防止伪元素延伸导致出现横向滚动条 */
}

.box {
  position: relative;
  flex: 0 0 50%; /* 按你的栅格列宽设置，比如col-8就是66.666% */
  padding: 24px;
  box-sizing: border-box;
}

/* 左侧div样式 */
.a {
  background: #2563eb;
}
.a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%; /* 从左侧div的左边缘往左延伸 */
  width: 100vw;
  background: inherit; /* 继承当前div背景，无需重复编写 */
  z-index: -1;
}

/* 右侧div样式 */
.b {
  background: #ef4444;
}
.b::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%; /* 从右侧div的右边缘往右延伸 */
  width: 100vw;
  background: inherit;
  z-index: -1;
}

方案优势 #

• 全浏览器兼容，支持IE11及以上所有现代浏览器
• 完全适配所有视口尺寸，无需手动计算断点
• 支持纯色、渐变、背景图片等所有背景属性
• 不需要修改原有栅格布局逻辑，接入成本极低

方案2：Grid布局法（多列场景最优） #

如果是多列复杂布局，更推荐使用Grid布局实现，逻辑更清晰，无层级嵌套问题。

实现原理 #

在外层新增Grid容器，将布局分为三列：左侧剩余空间、栅格内容区、右侧剩余空间，内容放在中间列，背景分别填充到左右两侧列即可。

代码示例 #

.wrapper {
  display: grid;
  grid-template-columns: 1fr min(1200px, 100%) 1fr;
}
/* 左侧背景填充 */
.a-bg {
  grid-column: 1 / 2;
  background: #2563eb;
}
/* 右侧背景填充 */
.b-bg {
  grid-column: 3 / 4;
  background: #ef4444;
}
/* 原有栅格内容区 */
.container {
  grid-column: 2 / 3;
  display: flex;
}
.box {
  flex: 0 0 50%;
  padding: 24px;
}
.a {
  background: inherit;
}
.b {
  background: inherit;
}

注意事项 #

• 伪元素方案中如果父容器没有设置overflow-x: clip，可改为给body添加overflow-x: hidden避免横向滚动条
• 两种方案都支持任意比例的栅格列宽，不需要额外调整背景相关代码

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