我有一个固定大小的布局，我将内容容器居中。
我希望菜单（主页、关于、联系人、登录）覆盖 100% 的屏幕。
看看这个jsfiddle：http: //jsfiddle.net/Hxhc5/1/
我想要的结果是这样的：
我尝试用菜单制作一个 100% 宽度的容器，我会在里面有一个容器来使菜单居中，但效果不佳，因为布局是相对的，随窗口大小而变化。
问问题
473 次
3 回答
1
在菜单周围包裹一个额外的 div，给它灰色背景，删除额外的填充，使菜单背景为白色：
http://jsfiddle.net/sg3s/Hxhc5/3/
但是，当我们想要保持菜单和正确的 col 'open' 之间的空间时，这是有问题的。
最简单也可能是最好的方法是制作一个中间“打开”的模拟图像并将其用作背景。由于这种类型的 png 图像非常小，它比更多的标记、css 或 js 解决方案要好，而且如果使用得当，它也没有怪癖：
http://jsfiddle.net/sg3s/Hxhc5/10/
您还展示了您的实际开发站点；如果您想为菜单实现此功能，则必须使菜单固定高度（其他所有内容及其宽度仍然可以是流动的），因为您在图层中使用的不透明度类型。可以使用相同的背景技巧来使用它。
于 2012-04-21T21:55:07.407 回答
0
为什么不使用跨越整个页面的背景图像呢？
于 2012-04-21T21:52:35.870 回答
0
只需将菜单的内容添加到另一个 div 中，width: 500px, margin: auto;并将菜单宽度设置为 100%。这里更新了 jsFiddle：http: //jsfiddle.net/Hxhc5/2/
于 2012-04-21T21:52:59.867 回答