Question

我正在尝试创建一个div（topbar）（width = 100％;）。在下面，我希望我的maincontent在div中与我的主要内容。这需要在屏幕上宽度为600像素和厘米。

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

最简单的方法是什么？

Answer 1

无需触摸身体元素的宽度

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

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

Answer 2

如果我理解正确，您希望#topbar扩展100％的页面宽度，如果浏览器窗口小于600px，则该页面宽度当前没有...因为#maincontent推动了页面超过600px？

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

这是一个潜在解决方案的小提琴：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;
}

Topdiv宽100％但体宽600px

2 个答案: