0

通常、私のWebページでは#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/

4

1 に答える 1

1

すべての問題を解決するには：

  1. #bannerドキュメントのフローに従うことができるように、のコンテナ要素を作成します。また、バナーの親になるように配置します。

  2. 絶対に配置#bannerすると、好きなだけ広く伸ばすことができます。

更新- デモ

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;   
}
于 2012-11-02T19:13:01.673 に答える