窗宽背景加上宽度有限的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

回答

相关问题