CSS：將背景應用於具有固定寬度的div中的全寬

Question

我的頁面被劃分爲寬度有限的行。 （<div class='row'>） 我想將背景（顏色）應用於每一行，但我希望背景不考慮div的寬度限制，是否有辦法實現此目的？

謝謝！

Answer 1

你是否想要這樣的事情？如果您提供了一個小提琴或至少一些代碼，那麼回答您的問題會更容易，因此我們可以幫助您解決問題。

我來到這個解決方案：

<div class="row1"> 
    ... 
</div> 

<div class="row2"> 
    ... 
</div> 

.row1 { 
    background-color: red; 
    width: 100%; 
    height: 50%; 
} 
.row2 { 
    background-color: pink; 
    width: 100%; 
    height: 50%; 
} 

你可以在這裏運行：JSFiddle

Answer 2

您可能是更好的每一行放置一個.container流體內部與{最小寬度：100％}的div和您需要的顏色的自定義類

.container-fluid { 
 
    min-width: 100% 
 
} 
 
.row { 
 
    max-width: 300px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.green { 
 
    background-color: green; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
}

<div class="container-fluid red"> 
 
    <div class="row"> 
 
    <p>Row Content 1</p> 
 
    </div> 
 
</div> 
 
<div class="container-fluid green"> 
 
    <div class="row"> 
 
    <p>Row Content 2</p> 
 
    </div> 
 
</div> 
 
<div class="container-fluid blue"> 
 
    <div class="row"> 
 
    <p>Row Content 3</p> 
 
    </div> 
 
</div>

Answer 3

這是可能與僞元件，不需要額外的HTML。

.wrapper { 
 
    width: 50%; 
 
    margin: auto; 
 
} 
 
[class^=row] { 
 
    height: 50px; 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
} 
 
[class^=row]:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    height: 100%; 
 
    width: 100vw; 
 
    background: purple; 
 
    z-index: -1; 
 
} 
 
.row1 { 
 
    background-color: red; 
 
} 
 
.row2 { 
 
    background-color: pink; 
 
}

<div class="wrapper"> 
 
    <div class="row1">...</div> 
 
    <div class="row2">...</div> 
 
</div>