浮动元素，全宽

Question

我有一个固定大小的布局，我将内容容器放在中心位置。

我希望菜单（主页，关于，联系人，登录）能够跨越100％的屏幕。

看看这个jsfiddle：http://jsfiddle.net/Hxhc5/1/

我想要的结果是：

我已经尝试过用菜单制作一个100％宽度的容器，我会在里面放一个容器来使菜单居中，但是效果不好，因为那时布局是相对的，随着窗口大小而改变。

Answer 1

在菜单上包裹一个额外的div，给它灰色背景，删除额外的填充，使菜单bg为白色：

http://jsfiddle.net/sg3s/Hxhc5/3/

当我们想要保持菜单和右侧col'打开'之间的空间时，这是有问题的。

最简单的方法，可能是最好的方法是制作一个模拟图像，其中间是“打开”并将其用作背景。由于这种类型的png图像非常小，它比更多标记，css或js解决方案更好，如果正确使用它没有怪癖：

http://jsfiddle.net/sg3s/Hxhc5/10/

您还展示了您的实际开发网站;如果你想为菜单实现这个，你必须使菜单固定高度（在其他方面，其宽度仍然可以是流动的），因为你在图层中使用的不透明度类型。可以使用相同的背景技巧。

Answer 2

为什么不使用跨越整个页面的背景图片？

Answer 3

只需将菜单内容添加到另一个div中width: 500px, margin: auto;，然后将菜单宽度设置为100％。这里更新了jsFiddle：http://jsfiddle.net/Hxhc5/2/