浮动元素，全宽答案

【问题标题】：Floating elements, full width浮动元素，全宽
【发布时间】：2012-04-22 06:55:11
【问题描述】：

我有一个固定大小的布局，我将内容容器居中。

我希望菜单（主页、关于、联系人、登录）覆盖 100% 的屏幕。

我想要的结果是这样的：

我尝试用菜单制作一个 100% 宽度的容器，我将在其中有一个容器来使菜单居中，但效果不佳，因为布局是相对的，会随着窗口大小而改变。

【问题讨论】：

【解决方案1】：

将一个额外的 div 包裹在菜单周围，赋予它灰色背景，移除额外的填充，使菜单背景变为白色：

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

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

您还展示了您的实际开发站点；如果您想为菜单实现此功能，则由于您在图层中使用的不透明度类型，您必须使菜单固定高度（其他所有内容及其宽度仍然可以是流动的）。可以使用相同的背景技巧。

【讨论】：

如果背景不只是白色怎么办？像这样：jsfiddle.net/Hxhc5/5?
@Ragnar123 这肯定会使事情复杂化，从一开始就很高兴知道；）
哦，对不起。我的直接猜测是没关系。
这不是不可能的，让我模拟一下。
@Ragnar123 实际上，以最少开销做到这一点的最简单方法是制作一个足够宽以跨越整个宽度的 png 背景图像，并将其作为背景居中并在内容所在的中间。其他选项将或多或少地重建 html/css 结构，这会花费我太多时间，或者使用非常丑陋的 JS 方法来保持框的大小正确。所以选择吧。 HTML 方法会有点实验性，所以我不能给你很好的指导，但我需要更多的 html 和 css 来做。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：