幅の制限された要素内でページの幅にまたがるHTML要素を表示するにはどうすればよいですか？

Question

私はデザインの本体が940ピクセルの固定ピクセル幅を持つように設計されていますが、上下の境界線がこの境界を超えて拡張されるように設計しています。

これは、所望の効果を示す最も単純な画像である：トップナビゲーション配置絶対であるが、どのようなマークアップだろう可能性が

<!-- This is the Big Black width restricted box --> 
<div class="enclosingBox"> 
    <div class="topnav"> 
     Exclusives 
     Shop 
     The Brand 
     Press 
     Vault 
    </div> 

    <div> 
     <p>This is some stuff in the middle</p> 
     <p>Some Other Stuff in the middle</p> 
    </div> 

    <div class="bottomnav"> 
     SHOE PIC 1 
     SHOE PIC 2 
     SHOE PIC 3 
     SHOE PIC 4 
    </div> 
</div> 

：このようないくつかのHTMLを仮定

bottomnavのために働く必要がありますか？

Answer 1

あなたはそれについて間違った方法を考えています。あなたが正しく理解していれば、あなたが思っているレイアウトを得るための最良の方法は、不自然なオーバーレイを強制するのではなく、水平の「セグメント」としてページを作成することです。

<div style="width:800px;margin-left:auto;margin-right:auto;"> 
... all the top stuff, 100% wide and smaller 
</div> 

<div style="width:100%;"> 
<div style="width:800px;margin-left:auto;margin-right:auto;"> 
... your nav stuff 
</div> 
</div> 

<div style="width:800px;margin-left:auto;margin-right:auto;"> 
... you're body ... 
</div> 

<div style="width:100%;"> 
<div style="width:800px;margin-left:auto;margin-right:auto;"> 
... bottom nav stuff 
</div> 
</div> 

<div style="width:800px;margin-left:auto;margin-right:auto;"> 
... all your feets are belong to div 
</div> 

Answer 2

このようにします。

<div id="navigation"> 
    this is the navigation with 100% width. 
</div> 
<div id="width940"> 
    this is the container with 940px width 
</div> 

<!-- the css --> 
#navigation { 
    width:100%; 
    position:absolute; 
    top:50px; 
    height:32px; 
} 
#width940 { 
    width:940px; 
    margin:0 auto; 
} 

Answer 3

このようなものはかなり近いようです。

http://jsfiddle.net/Fq32a/2/

html, body { width: 100%; position: relative; } 

.topnav { 
    position: absolute; 
    top: 100px; 
    height: 75px; 
    left: 0px; 
    right: 0px; 
    border: 1px dotted gray; 
    text-align: center; 
} 

.bottomnav { 
    position: absolute; 
    bottom: 20px; 
    height: 50px; 
    left: 0px; 
    right: 0px; 
    border: 1px dotted gray; 
    text-align: center; 
} 

Answer 4

オーバーフロープロパティを調べることができます。 w3でドキュメントを見つけることができます。ただし、絶対的な測位を使用して投稿された回答は良好です。古いブラウザを扱う際にはかなり奇妙なものになりますので、試行錯誤的に問題に近づく必要があります。私はCSSの専門家ではありませんが、私はいくつかのことを知っています。理論的な絶対的な位置づけはうまくいくはずですが、私が言及した方法と絶対的な位置決め方法の両方に問題がありました。