css - 全幅の子divの背景色

Question

（負のマージンを使用して）最も外側の親divの幅全体に引き伸ばされたdivの背景色を設定しようとしています。

ここに簡単な例があります： http：//jsfiddle.net/U5dnd/

白の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フィドル

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>