使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

作为视觉技巧，您可以为div添加额外的填充，并使用负边距抵消。但是，您必须向body添加overflow-x：hidden以防止水平滚动：

*{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 2

作为替代答案，您可以使用: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 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>

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