Question

我无法弄清楚如何正确地进行此布局：

_________________________________________
| #Header div                            |
| position:fixed; width:100%;            |
|________________________________________|
|#bgleft      | #main        |#bgright   |
|min-width:0; |width:1000px; |min-width:0|
|max-width:460|              |max-w:460  |
|scroll:fixed |              |           |
|_____________|______________|___________|
|footer div, position:fixed; bottom:0;   |
|________________________________________|

基本上我不需要#bgleft和#bgright，所以它们不计入文档宽度，所以如果视口是1000px或更小，它只显示#main div。但是如果窗口较大，比如1200px，它会显示主要的div 1000px加上每个bgleft和bgright div的100px。希望有意义并感谢您的意见！

编辑：我忘了提到我希望#bgleft和#bgright图像表现得像滚动：固定，以便这些图像始终保持“连接”到页眉和页脚div。我基本上是想在#main div周围创建一个小“窗口”，但是我希望bgleft和bgright没有必要，除非窗口足够大以显示它们。

演示：http://jsfiddle.net/7Y7TJ/13/（这是我能够获得的壁橱，但问题是#bgleft div不是固定位置，因为#main内容向下滚动）

Answer 1

基于我认为你想要的东西，我不明白为什么你不能在CSS中做到这一点而不需要求助于任何JS。

您可以在样式表中使用不同的“@media screen”标签来强制页面根据浏览器大小使用不同的样式。

例如：

@media screen and (max-width: 1199px) { CSS GOES HERE }

当视口大小达到1199像素宽时，上面会显示您定义的任何样式。

@media screen and (min-width: 1200px) { CSS GOES HERE }

以上内容将在1200px宽的浏览器窗口上显示另一种样式。

您还可以将最大宽度和最小宽度组合在一起显示范围之间的样式，例如：

@media screen and (min-width: 1000px) and (max-width: 1200px) { CSS GOES HERE }

如果视口位于1000px和1200px之间，那将显示特定样式。

我很确定你想做的一切都可以在那种设置中完成。从我所知道的那里，有可能因为多余的JS和JQ而陷入困境，但这似乎有些多余。

Answer 2

这是我发现的最佳解决方案：

在#main周围放一个#wrapper div，并为#wrapper使用以下css：

background-image: url(bgtest.png);
background-repeat: no-repeat;
background-position: center 0;
background-attachment: fixed;

具有折叠侧边栏和静态大小中间的三列布局

2 个答案: