コンテンツ コンテナーを中央に配置する固定サイズのレイアウトがあります。
メニュー (ホーム、概要、連絡先、ログイン) を画面の 100% に表示したい。
この jsfiddle を見てください: http://jsfiddle.net/Hxhc5/1/
私が望む結果はこれです：
メニューを使用して幅 100% のコンテナーを作成しようとしましたが、内部にコンテナーを配置してメニューを中央に配置しましたが、うまく機能しませんでした。これは、レイアウトが相対的であり、ウィンドウ サイズによって変更されたためです。
メニューの周りに追加の div をラップし、背景を灰色にし、余分なパディングを削除し、メニューの背景を白にします。
http://jsfiddle.net/sg3s/Hxhc5/3/
ただし、メニューと右の列の間のスペースを「開いた」状態に保ちたい場合、これは問題になります。
最も簡単でおそらく最良の方法は、中央が「開いた」ままのモック画像を用意し、それを背景として使用することです。このタイプの png 画像は非常に小さいため、より多くのマークアップ、css、または js ソリューションよりも優れています。さらに、正しく使用すれば癖はありません。
http://jsfiddle.net/sg3s/Hxhc5/10/
また、実際の開発サイトも示しました。メニューにこれを実装したい場合は、レイヤーで使用する不透明度のタイプにより、メニューの高さを固定する必要があります（他のすべてとその幅は流動的です）。同じバックグラウンド トリックを使用して動作させることができます。
代わりに、ページ全体に広がる背景画像を使用してみませんか?
メニューのコンテンツを別の div に追加しwidth: 500px, margin: auto;、メニューの幅を 100% に設定するだけです。更新された jsFiddle は次のとおりです: http://jsfiddle.net/Hxhc5/2/