Question

我想尝试构建一个干净，漂亮的代码，我可以在下面的图像中看到结果。它在Firefox，Chrome或Safari中都可以，但在IE中却没有。

我用代码创建了JSFiddle 基本上我只需要100％宽度的红色条（窗口中的边到边），但内容（包括导航）的宽度应该是有限的。
所以我正在寻找一个漂亮，干净的片段，使其适用于所有浏览器（包括IE ...）

enter image description here

Answer 1

<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>

Answer 2

<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>

窗口宽背景结合宽度限制的div

2 个答案: