0

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

正文的 CSS：

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

我怎样才能做到这一点 ？

像这样的布局：http ://www.google.com/analytics/index.html （注意body的固定宽度和菜单栏比这更宽）

4

2 回答 2

0

你可以这样做：DEMO

#header{    
float:left;
padding:15px 0;
width:100%;
}
于 2013-02-20T04:45:34.527 回答
0

我认为你想要的是让你的内容在 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 */
}

至于谷歌分析网站，他们有页面的全宽单独部分，定义了颜色、边框等，然后是一个区域，就像我在上面每个部分中描述的#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;
}
于 2013-02-20T04:48:29.267 回答