Topdiv寬100％但體寬600px

Question

我正在嘗試創建一個div（topbar）（寬度= 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以上？

我相信你需要一個body { min-width:600px; } body { min-width:600px; }給力topbar到600px的頁面是否小於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;
}