css - Topdiv 宽度为 100% 但正文宽度为 600px

Question

我正在尝试创建一个 div (topbar) (width = 100%;)。在此之下，我希望我的主要内容与我的主要内容放在一个 div 中。这需要是 600 像素的宽度和屏幕中心。

通常我会设置 body width = 600px 和 margin: auto，但是我的 topbar 会缩短。

最简单的方法是什么？

Answer 1

无需触摸body元素的宽度

#topbar {
    width:100%;
    height: 150px; // Whatever height you want
 }

 #mainContent {
   width: 600px;
   margin: 0 auto; // Center on the screen
 }

Answer 2

如果我理解正确，#topbar如果浏览器窗口小于 600 像素，您想要扩展 100% 的当前未执行的页面宽度......因为#maincontent将页面推出超过 600 像素？

如果页面宽度小于 600 像素，我相信您需要body { min-width:600px; }强制设置为 600 像素。topbar

这是一个潜在解决方案的小提琴：http: //jsfiddle.net/z2dEK/1/

这是CSS：

body {
    background:#ccc;
    min-width:600px;
}
#topbar {
    background:#000;
    height:100px;
    width:100%;
}
#maincontent {
    background:#fff;
    margin:auto;
    width:600px;
    height:100px;
}