使div背景為窗口寬度的100％

Question

我在容器內有div content-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添加額外的填充並使用負邊距抵消。 但是，您必須在主體上添加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>

然后，使容器包裝器全寬並帶有綠色背景。