css - 从左到右延伸的 CSS 横幅

Question

通常对于我的网页，我将有一个#wrapperDIV 包装整个页面并设置为：

#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

To solve all your issues:

1. Make a container element for your #banner, so it can follow the flow of your document. Also position it relative to make it the parent to your banner.

2. Position #banner absolutely and you can stretch it as wide as you want.

---

UPDATE - 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;   
}