Question

我试图在被拉伸（使用负边距）的div上设置背景颜色到其最外层父div的整个宽度。

白色div .featured-wrapper覆盖黑色div .site的整个宽度，但其背景颜色不是。我认为边距是透明的。

有没有办法让整个.featured-wrapper div白色，包括其（负）边距？（或者还有另一种方法可以实现这一目标吗？）

谢谢！

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 Fiddle

<强> 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>

全宽儿童div的背景颜色

2 个答案: