从左到右延伸的css横幅

Question

通常在我的网页上，我会有一个#wrapper DIV包裹整个页面并设置为：

#wrap {position: relative; width: 1000px; display: block; margin: auto;}

我的问题是，如果我内心有这样的横幅：

#banner {width: 100%; display: block; height: 100px; background :#CCC;}

然后我希望那个横幅在#wrapper的边缘外面并到达窗口的两侧，无论窗口有多大。

我怎样才能做到这一点？

这是我可以拼凑的JS小提琴：http://jsfiddle.net/MCms6/

Answer 1

解决所有问题：

1. 为#banner创建一个容器元素，以便它可以跟踪文档的流程。同时将其定位为使其成为横幅的父级。

2. 绝对定位#banner，您可以根据需要将其拉伸。

---

更新 - DEMO

的 HTML 的

<div id="wrapper">
    <h1>my content my content my content my content my content my content my content my content </h1>

    <div id="bannerHolder">
        <div class="banner">
            my Banner
        </div>
    </div>

     <h1>more content more content more content more content more content more content more content</h1>
</div>

的 CSS 的

#wrapper {
    width: 140px;
    display: block;
    margin: auto;
    background: #ccc;        
}

#bannerHolder {
    background: #aaa;
    display: block;
    height: 100px;
}

#bannerHolder .banner {
    border: 1px solid #f00;
    position: absolute;
    background: #555;
    left: 0;
    right: 0;
    height: 100px;   
}