Question

我正在为我的网页模板创建一个修复布局（960px宽）。但我希望菜单栏的宽度为浏览器的宽度（这意味着，尽可能宽，没有边距）。

body for body：

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

您可以这样做： DEMO

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

全宽Div内部固定布局

2 个答案: