使div背景达到窗口宽度的100%

Question

我有div内容-3，在容器内。我想使这个背景颜色100%，因为他的身高，这可能会增加。我认为使用css是可能的。这是我要求的图片。

​

​

*{padding:0; margin:0; box-sizzing:border-box;}
.container{margin: 0px auto; width: 80%; border: 1px solid #333;}
.content{min-height:50px}
.content-3{background:green}

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

​

Answer 1

作为另一个解决方案，您可以使用: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%。

Answer 2

作为一个视觉技巧，您可以添加额外的填充到div和抵消使用负边距。但是，您必须添加溢出-x:隐藏到主体，以防止水平滚动：

​

*{padding:0; margin:0; box-sizzing:border-box;}
.container{margin: 0px auto; width: 80%; border: 1px solid #333;}
.content{min-height:50px}
.content-3{
  background:green;
  padding-left:100%;
  padding-right:100%;
  margin-left:-100%;
  margin-right:-100%;
}

body{overflow-x:hidden}

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

​

Answer 3

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

<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>

然后做一个绿色背景的容器包装全宽度。