固定車身布局內的全寬Div

Question

我正在為我的Web模板創建一個固定布局（960px寬）。 但是我希望菜單欄的寬度作為瀏覽器的寬度（也就是說，盡可能寬且沒有邊距）。

身體的CSS：

body{
    width:960px;
    min-width:960px;
    margin:auto auto;
}

我怎樣才能做到這一點？

這樣的布局： http : //www.google.com/analytics/index.html （請注意，主體的固定寬度和菜單欄的寬度要寬於此寬度）

Answer 1

我認為您想要的是將您的內容放在960px區域居中，但具有其他內容（在這種情況下，您的菜單）可以是頁面的整個大小。 為了做到這一點，您不能像您那樣設置主體本身的寬度。 相反，您應該具有一些HTML，例如：

<html>
<head>
  :
</head>
<body>
  <div id="ContentBox">
    : put your content here
  </div>
  <div id="Menu">
    : Menu content here
  </div>
</body>
</html>

然后在您的CSS中：

#ContentBox {
  margin: 0 auto;
  width: 960px;
}
#Menu {
  /* Whatever is applicable */
}

對於Google Analytics（分析）網站，他們在頁面的各個部分分別設置了全寬，並定義了顏色，邊框等，然后定義了一個區域，就像上面每個部分中所述的#ContentBox一樣。 您甚至可以使其成為通用類並重用它，例如：

<body>
  <div id="HeaderBar">
    <div class="ContentBox">
      :
    </div>
  </div>
  <div id="GreyBGRegion">
    <div class="ContentBox">
      :
    </div>
  </div>
</body>

CSS：

#HeaderBar {
  border-bottom: #CCCCCC 1px solid;
  background-color: #000000;
  color: #FFFFFF;
}
#GreyBGRegion {
  border-bottom: #CCCCCC 1px solid;
  background-color: #F0F0F0;
  color: #000000;
}
.ContentBox {
  margin: 0 auto;
  width: 960px;
}

Answer 2

您可以這樣操作：演示

#header{    
float:left;
padding:15px 0;
width:100%;
}

固定車身布局內的全寬Div

問題描述

2 個解決方案

解決方案1
1 已采納 2013-02-20 04:48:29

解決方案2
0 2013-02-20 04:45:34

固定車身布局內的全寬Div

問題描述

2 個解決方案

解決方案1 1 已采納 2013-02-20 04:48:29

解決方案2 0 2013-02-20 04:45:34

解決方案1
1 已采納 2013-02-20 04:48:29

解決方案2
0 2013-02-20 04:45:34