0

我不知道如何正确地制作这个布局：

_________________________________________
| #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 内容向下滚动）

4

2 回答 2

1

根据我认为你所追求的，我不明白为什么你不能在 CSS 中做到这一点而不需要求助于任何 JS。

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

例如：

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

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

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

以上将在超过 1200 像素宽的浏览器窗口上显示替代样式。

您还可以结合 max-width 和 min-width 来显示范围之间的样式，例如：

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

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

我很确定您想做的所有事情都可以在这种设置中完成。据我所知，有被多余的 JS 和 JQ 拖累的风险，但这似乎有点多余。

于 2012-06-17T15:55:47.483 回答
0

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

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

background-image: url(bgtest.png);
background-repeat: no-repeat;
background-position: center 0;
background-attachment: fixed;
于 2012-06-17T17:30:51.257 回答