修复了Blueprint div，其背景宽度跨越整个浏览器窗口

Question

我正在Compas使用Blueprint framework。

我使用的是24列布局，总宽度为1000像素。这在我的base.scss。

中定义

标记看起来像这样：

<div id="menu">
  <div id="container">
     <div id="main-menu">
      <ul>
        <li>Link1</li>
        <li>Link2</li>
        <li>Link3</li>
      </ul>
     </div>
  </div>
</div>

scss：

@import "../partials/base";
@import "blueprint";
@import "compass/typography/lists/horizontal-list";

#container{
  @include container();
}

#main-menu-container{
  background-color: red;
  min-width: 1000px;
  position: fixed;
  top: 0%;
  left: 50%;
  margin-left: 500px;

}

#main-menu{

  @include horizontal-list();
  @include span(24);
  border: red 1px solid;

}

整个事情都有效。但我想把菜单固定在窗口的顶部。

问题是，我开始向任何容器添加position: fixed，然后背景不会100％伸展。

我想要的效果就像facebook的菜单一样。请注意，背景拉伸100％，但菜单仅占据网格并居中：

如何用蓝图实现这种效果？

我宁愿不添加任何没有任何意义含义的额外div。

Answer 1

这就是我最终的结果：

@import "../partials/base";
@import "blueprint";
@import "compass/typography/lists/horizontal-list";

#container{
  @include container();
}

#main-menu-container{
  background-color: blue;
  min-width: 1000px;
  position: fixed;
  width: 100%; //Notice that a width is explicitly set
  top: 0%;
}

#main-menu{
  @include horizontal-list();
  @include span(24, true);
}