我有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>
答案 0 :(得分: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>
答案 1 :(得分: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%没有水平滚动。
答案 2 :(得分:0)
如果您能够创建多个容器元素,则可以执行以下操作:
<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>
然后只需使用绿色背景制作容器包装器全宽。