全宽子div的背景颜色

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

Here's一个简化的例子：http://jsfiddle.net/U5dnd/

白色DIV .featured-wrapper覆盖黑色DIV .site的全宽，但其背景颜色doesn't。我想边际是透明的。

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

谢谢！

来源

2012-09-25 Mattvic

我没有正确理解你，但是你想要的是http://jsfiddle.net/swamimayank/5JH6w/？ –

从视觉上来说，我想让示例中的白色小孩div覆盖整个黑色背景，从左到右。 – Mattvic

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

来源

2012-09-25 15:26:54

谢谢，这在JSfiddle中很好用，尽管它在我的模板中导致了一些其他的令人头疼的问题;）似乎绝对定位是要走的路，所以我会走这条路。 – Mattvic

入住这

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>

来源

2012-09-25 15:39:34 Narendra

如果需要更改，请告知我。 – Narendra

全宽子div的背景颜色

回答

相关问题