Question

在我正在处理的网站上，我有一些元素，我希望background填充浏览器的整个宽度，但我也希望元素上有max-width。

我可以做到这一点，但我觉得这样做可能比现在更好“。

这是一个原始示例的小提琴：http://jsfiddle.net/5KJf5/

正如你可以在小提琴中所做的那样，max_w课只是将max-width放在元素上;如果我将max-width放在.row上，max-width background-color会停止。

所以，我的问题是：

有没有更好的方法让元素的background-color跨越整个屏幕，同时仍然能够维持max-width，而不是创建一个特殊的类来执行此操作？

提前致谢。

Answer 1

我认为没有直接的方法来扩展元素实际区域之外的背景。要实现您真正想要的，我们可以在padding函数的帮助下使用相对calc()，我们还必须将box-sizing设置为border-box所以容器的大小包括边框（默认情况下不是内容）：

.row {
   ...
   padding: 10px calc((100% - 300px)/2);
   box-sizing:border-box;    
}

现在您不需要包装器max_w，这里是fiddle demo

Answer 2

您可以使用：之前的背景。

.row:before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    background-color:aqua;
    top:0;
    left:0;
 }