窗寬背景加上寬度有限的div

我想嘗試構建一段乾淨而美觀的代碼，在那裏我可以完成您在下圖中看到的結果。在Firefox，Chrome或Safari中可以使用，但不能在IE中使用。窗寬背景加上寬度有限的div

我用代碼創建了一個JSFiddle。
基本上我想要100％寬度的紅色條（窗口邊緣到邊緣），但內容（包括導航）的寬度應該是有限的。
於是我找一個不錯的，乾淨的片段，使所有瀏覽器這項工作（包括IE瀏覽器...）

enter image description here

2012-02-22 Michiel

<style> 
body{ 
    background-color: #fff; 
    margin: 0; 
    padding: 0; 
} 
#subtopContainer{ 
    background-color: #f00; 
} 
#subtop, #header, #content{ 
    width: 980px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#header{ 
    height: 150px; 
} 
#subtop{ 
    height: 50px; 
} 
</style> 

<div id='container'> 
<div id='headerContainer'> 
    <div id='header'></div> 
</div> 
<div id='subtopContainer'> 
    <div id='subtop'></div> 
</div> 
<div id='contentContainer'> 
    <div id='content'></div> 
</div> 
</div>

來源

2012-02-22 16:40:27 feskr

<style> 
    body { background-color: #fff; margin: 0; padding: 0; } 
    div.wrapper { margin: 0 auto; width: 980px; background: lime} 
    div.header { height: 70px; margin-bottom: 40px;} 
    div.content { height: 400px; } 
    div.bar { height: 40px; background: #f00; overflow: hidden; position: absolute; top: 70px; width: 100%;} 
</style> 

<body> 
    <div class="bar"></div> 
    <div class="wrapper"> 
    <div class="header"> 
     Header Stuff 
    </div> 

    <div class="content"> 
     In order for this to work, 

     div.bar 'top' = div.header 'height' 
     div.header 'margin-bottom' = div.bar 'height'. 
    </div> 
    </div> 
</body>

來源

2012-02-22 17:42:43

窗寬背景加上寬度有限的div

回答

相關問題