css - 全角子div的背景颜色

Question

我正在尝试在 div 上设置背景颜色，该 div 被拉伸（使用负边距）到其最外层父 div 的全宽。

这是一个简化的例子：http: //jsfiddle.net/U5dnd/

白色 div.featured-wrapper覆盖了黑色 div 的整个宽度.site，但它的背景颜色没有。我想边距是透明的。

有没有办法让整个.featured-wrapperdiv 变白，包括它的（负）边距？（或者还有其他方法可以做到这一点吗？）

谢谢！

Answer 1

.featured-wrapper {
    background-color: white;
    height:50px;
    margin: 20px 0px 0 0px;
    position:absolute;
    width:100%;
    z-index:100;
    left:0;
}

Answer 2

检查这个

JS小提琴

CSS：

.site {
    background-color:black;       
    padding: 0 40px;
    height:300px;
    width:320px;
}
.site-content {
    width:100%;
    overflow:hidden;
}
.wrapper {
    overflow:hidden; 
    background-color:red; 
    height:100%;
}
.featured-wrapper {
    background-color: white;
    height:50px;
    margin: 20px 0 0 -40px;
    position: absolute;
    width: 399px;
}

HTML：

<div id="page" class="site">

    <div id="main" class="wrapper">

        <div id="primary" class="site-content">
            <div class="featured-wrapper">
                <p>This is the featured wrapper</p>
            </div>
    </div>
   </div>

</div>