Css 窗宽背景与宽度有限的div组合_Css_Html

Css 窗宽背景与宽度有限的div组合

css html

Css 窗宽背景与宽度有限的div组合,css,html,Css,Html,我想尝试构建一段干净漂亮的代码，在这里我可以完成下图所示的结果。在Firefox、Chrome或Safari中都可以，但在IE中不行我用代码创建了一个新的应用程序。基本上，我想要的是100%宽度的红色条（窗口中的边到边），但内容（包括导航）的宽度应受到限制。因此，我正在寻找一个好的、干净的代码片段，使其在所有浏览器（包括IE…）中都能工作身体{ 背景色：#fff；保证金：0；填充：0； } #次容器{ 背景色：#f00； } #小计，标题，内容{ 宽度：980px；左边距：自动；

我想尝试构建一段干净漂亮的代码，在这里我可以完成下图所示的结果。在Firefox、Chrome或Safari中都可以，但在IE中不行

我用代码创建了一个新的应用程序。
基本上，我想要的是100%宽度的红色条（窗口中的边到边），但内容（包括导航）的宽度应受到限制。
因此，我正在寻找一个好的、干净的代码片段，使其在所有浏览器（包括IE…）中都能工作


身体{
背景色：#fff；
保证金：0；
填充：0；
}
#次容器{
背景色：#f00；
}
#小计，标题，内容{
宽度：980px；
左边距：自动；
右边距：自动；
}
#标题{
高度：150像素；
}
#小计{
高度：50px；
}


正文{背景色：#fff；边距：0；填充：0；}
div.wrapper{边距：0自动；宽度：980px；背景：石灰}
div.header{高度：70px；边距底部：40px；}
div.content{height:400px；}
div.bar{高度：40px；背景：#f00；溢出：隐藏；位置：绝对；顶部：70px；宽度：100%；}
标题材料
为了让这一切顺利进行，
分区栏“顶部”=分区标题“高度”
div.header“边距底部”=div.bar“高度”。

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

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