Css 浮动元素，全宽

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

我希望菜单（主页、关于、联系、登录）能够覆盖整个屏幕

看看这个JSFIDLE：

我想要的结果是：

---

我试着用菜单制作一个100%宽度的容器，在里面我会有一个容器来居中菜单，但效果不好，因为这样布局是相对的，随着窗口大小的变化而变化。

为什么不使用一个覆盖整个页面的背景图像呢？

只需将菜单的内容添加到另一个div中，宽度为500px，边距为自动并将菜单宽度设置为100%。以下是更新后的JSFIDLE:

在菜单周围加上一个div，给它一个灰色背景，去掉多余的填充，使菜单背景为白色：

当我们想保持菜单和右栏之间的空间“打开”时，这是有问题的

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

---

您还展示了您的实际开发站点；如果你想为菜单实现这一点，你将不得不使菜单固定高度（其他任何东西和它的宽度仍然可以是流体），因为你在层中使用的不透明度类型。同样的背景技巧也可以使用。

菜单之间的空间如何？有可能保持白色背景=@Gabizish不需要100%的宽度，自动调整大小可以解决这一问题，而且更干净。如果背景没有颜色那么简单怎么办：？@sg3s你是对的，它可以在不将菜单宽度设置为100%的情况下工作。@Gabitsh有一点缺陷，即如果你足够快地调整帧的大小，灰色会跳到下一行，灰色框的高度会丢失一个像素。使用图像会减少开销。如果背景不只是白色呢？像这样：？@Ragnar123肯定会让事情复杂化，如果从一开始就知道就好了；）哦，对不起。我的直接猜测是，它并不重要。但它不是不可能的，让我来模拟一些东西。@拉格纳123实际上是用最少的开销来做到这一点的绝对最简单的方法是制作一个足够宽的PNG回退图像，并将其作为背景，并在内容所在的中间留出一个空隙。其他的选择是或多或少地重建html/css结构，这花费了我太多的时间，或者是一个非常丑陋的JS方法来保持框的正确大小。所以你挑吧。HTML方法只是一个小小的实验，所以我不能给你很好的提示，但是我需要更多的HTML和css来做。我已经为我的网站使用了一个背景图片，我发现它不适合使用一个背景，在那里我绝对地锁定了这个元素的高度。