どのように固定ハンドルん幅レイアウトページ全体

Question

全体の背景色のストレッチは、私は、世界的に、すべてのコンテンツが画面の中央に固定幅が中心になるように前記ページを構築しようとしているとき、あたかもすべてがラッパーに含まれているかのように。下の例では、親divのmax-widthは500pxに設定されています。

このサイトの一部のセクションには、下の青色の例のように、ページの幅全体に伸びる必要がある背景色または背景イメージがあります。div私はこのdivをposition:absoluteに設定して、その親の幅の設定を超えるようにしました。

しかし、私は青の中に含まれているコンテンツを持っていたい場合はdiv、このコンテンツは500pxのグローバル固定幅設定に従いますか？次の例では、緑のdivがmax-width: 500px;設定の中に座って、代わりにその直接の親、青divの幅を継承していないことがわかります。

グリーンdivがグローバルmax-widthを追従させる方法はありますか？

<div style="max-width: 500px; height: 1000px; background-color: red; margin: 0 auto;"> 
 
    <div style="position: absolute; width: 100%; height: 400px; background-color: blue; left: 0; top: 50px;"> 
 
    <div style="position: absolute; width: 500px; height: 300px; background-color: green; top: 50px;"> 
 
    
 
    </div> 
 
    </div> 
 
</div>

ここで私が話しているかの絵だ：たとえば

、その真ん中のdivの背景には、ページの幅全体に広がっています。しかし、それは固定幅を持つ内容を含んでいます。

緑のdivのため

Answer 1

：幅：500pxなど。高さ：300px;背景色：緑;余白：50px auto 0px auto;

あなたは本当にそれそのようにしたいが、私はあなたが巣に赤1青のdivいけないことをお勧めします。