求双并排盒子全屏背景优化方案：内容限特定尺寸容器

你的需求可以通过更简洁的方式实现，无需依赖伪元素和复杂的定位。核心思路是利用线性渐变背景让容器的背景延伸至全屏，同时保持内容约束在指定宽度内。

优化后的代码 #

HTML（保持原结构不变） #

<div class="wrapper">
  <div class="container">
    <section class="left">LEFT</section>
    <section class="right">RIGHT</section>
  </div>
</div>

SCSS #

.wrapper {
  background: lightgray;
  padding-block: 10px;
  overflow: hidden;
}

.container {
  border: dotted 1px red;
  display: flex;
  max-width: 900px;
  margin-inline: auto;
  /* 用线性渐变实现左右分色背景，延伸至全屏 */
  background: linear-gradient(to right, green 50%, orange 50%);
  background-size: 100vw 100%;
  background-position: center;
  
  section {
    padding-block: 100px;
    border: solid 1px blue;
    flex: 1;
    background: transparent; /* 让下层渐变背景透出来 */
  }
}

为什么这更优？ #

• 代码量更少：去掉了冗余的伪元素和定位逻辑，维护成本更低。
• 性能更好：减少了DOM元素（伪元素）的渲染开销。
• 更易扩展：如果需要调整分色比例，只需修改渐变的百分比即可。

另一种方案：CSS Grid实现 #

如果你需要更精细的控制，也可以用Grid布局实现类似效果：

.wrapper {
  background: lightgray;
  padding-block: 10px;
  overflow: hidden;
}

.container {
  border: dotted 1px red;
  display: grid;
  grid-template-columns: 1fr min(900px, 100%) 1fr;
  margin-inline: auto;
  
  & > * {
    grid-column: 2;
    display: flex;
  }
  
  section {
    padding-block: 100px;
    border: solid 1px blue;
    flex: 1;
    position: relative;
    
    &.left {
      background: green;
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        background: inherit;
        z-index: -1;
        transform: translateX(-100%);
      }
    }
    
    &.right {
      background: orange;
      &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100%;
        background: inherit;
        z-index: -1;
        transform: translateX(100%);
      }
    }
  }
}

这个方案通过Grid的三列布局让伪元素延伸到全屏，适合需要单独控制左右背景样式的场景。

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