html - 如何将内容保留在容器中，但在 CSS 中扩展它的背景全宽？

Question

我正在尝试开发如下所示的设计:

在上面的设计中，红线是容器的侧面。我将部分的内容保存在容器 div 中，如下所示:

.container {
width: 1200px;
margin: 0 auto;
}

但我希望蓝色背景 div 到左侧的内容以扩展屏幕的整个宽度，突破容器，同时将内容保持在容器内的蓝色背景内。

我似乎找不到将内容保留在容器中的最佳方法，但蓝色背景 div 一直延伸到屏幕左侧。

Answer 1

实现您正在寻找的一种方法是使用伪元素来模拟背景。关键是定位伪元素，并给他合适的尺寸。

举个例子:

* {
  box-sizing: border-box;
}
.container {
  max-width: 400px;
  padding: 20px 0;
  margin: 0 auto;
}
.container:after {
  content:'';
  display: table;
  height: 0;
  clear: both;
}
.w50 {
  float: left;
  width: 50%;
  position: relative;
  z-index: 2;
}
.w50:first-child:before {
    content:'';
    background: #ddd;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50vw;
    z-index: -1;
}

<div class="container">
  <div class="w50">
    <h2>First child</h2>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
    </p>
        <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
    </p>
        <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
    </p>
        <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem.
    </p>
    
  </div>
  <div class="w50">
    <h2>Second child</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora illum eligendi, praesentium saepe error itaque reiciendis. Placeat sint quasi ea obcaecati soluta accusamus. Reiciendis incidunt praesentium quidem commodi expedita?</p>
  </div>
</div>

实现方法如下:

• 在需要背景的元素上添加position: relative;。
• 添加一个 peusdo 元素 :before。
• 添加position: absolute;, width: 50vh;顶部:0；右:0； bottom: 0; 到那个伪元素。