使div背景100%与窗口宽度

时间:2016-06-19 06:50:20

标签: html css

我有div内容-3,它在容器内。我想让这个背景颜色100%为他的身高,这可能会增加。我认为这可能使用CSS。这是我要求的形象。 enter image description here

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

3 个答案:

答案 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%更改为-10vwvw表示视口宽度,因此如果您的容器宽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>

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