Html 使div背景为窗口宽度的100%

我有divcontent-3，它在容器中。我想让这个背景色100%适合他的身高，这可能会增加。我认为这是可能的使用css。这是我的要求的图像

*{填充：0；边距：0；框大小：边框框；}
.container{margin:0px auto；宽度：80%；边框：1px solid#333；}
.content{最小高度：50px}
.content-3{背景：绿色}

内容1
内容2
内容3
内容4

作为一种视觉技巧，您可以在div中添加额外的填充，并使用负边距进行抵消。但是，您必须在正文中添加overflow-x:hidden以防止水平滚动：

*{填充：0；边距：0；框大小：边框框；}
.container{margin:0px auto；宽度：80%；边框：1px solid#333；}
.content{最小高度：50px}
.内容-3{
背景：绿色；
左：100%；
右：100%；
左边距：-100%；
保证金权利：-100%；
}
正文{overflow-x:hidden}

内容1
内容2
内容3
内容4

如果您能够创建多个容器元素，您可以执行以下操作：

<div class="container">
    <div class="content content-1">content 1</div>
    <div class="content content-2">content 2</div> 
</div>
<div class="container-wrapper">
    <div class="container">
        <div class="content content-3">content 3</div>
    </div>
</div>
<div class="container">
    <div class="content content-4">content 4</div>
</div>

内容1
内容2
内容3
内容4

---

然后，只需使用绿色背景使容器包装器全宽。

作为替代答案，您可以使用

：before

和

：after

伪元素来实现相同的效果

对HTML没有任何更改

将此添加到CSS中：

.content.content-3 {
    position: relative;
}
.content.content-3:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10vw;
    right: 100%;
    background: green;
}
.content.content-3:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    right: -10vw;
    background: green;
}

---

编辑：将左/右位置的

-100%

更改为

-10vw

vw

表示视口宽度，因此，假设容器的宽度为

80%

宽度，您希望每侧延伸

10vw

，以在不进行水平滚动的情况下达到100%。

您的代码片段已经符合您的要求。那个么你们到底需要什么呢？我想把背景色做成和窗口宽度一样大的颜色。现在它根据容器的宽度使用背景色。太好了……它正在工作……谢谢……但是为什么使用body{overflow-x:hidden}是否还有其他替代方法？边距：100%可能会溢出窗口并导致水平滚动。与我下面的伪元素答案一样，您可以尝试使用padding left/padding right=10vw和margin left/margin right=-10vw。是的，它可以工作……但我希望所有内容div都在一个容器中。谢谢