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>