ブラウザウィンドウ全体に渡って背景幅が固定されたBlueprint div

Question

Blueprint frameworkとCompasを使用しています。

私は合計幅1000pxの24列レイアウトを使用しています。これは私の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); 
}