我正在尝试创建一个 CSS 布局，使页面看起来像在森林中间。有一个带有背景树的左右 div，一些页眉 div 显示页面顶部和各种野生动物，一些页脚 div 显示底部有更多野生动物，与左右 div 背景图像相匹配，所有其中使用 CSS 中的“位置：固定”定位。
然后中间有内容正常定位且可滚动。一切正常。
我遇到的问题是背景森林布局固定为 1204x768，但当然某些 Web 浏览器窗口可能没有那么大。不幸的是，虽然内容会按预期滚动，但如果它们超出浏览器窗口的大小，则永远不会显示固定位置的元素。显然不能接受。
我尝试在样式表中的 .body 和 .html 元素上设置溢出：滚动和高度：768，但没有成功。
请注意，我在 CSS 中使用 top: 和 left: 值定位所有内容。我知道我可以通过使用 bottom: 和 right: 来解决这个问题，但问题是页脚图像不会对齐。
这可能是不可能的，在这种情况下我将不得不重新设计图形设计，但如果可能的话，我很想知道如何！
【问题讨论】：
当然，有些网络浏览器窗口可能没有那么大
或者确实那么小！浏览器窗口的大小实际上恰好适合将您的装饰放在边缘的可能性很小；这一直是固定布局的问题。
我知道我可以通过使用 bottom: 和 right: 来解决这个问题，但问题是页脚图像无法对齐。
是的，设计可以根据页面大小变化改变其连接的图像需要更多的工作，但它是可行的。您必须将“鸟+树叶”图层和“松鼠+树叶”图层导出为独立的透明图像，然后将它们放在较长的侧面图像的顶部。
要使对象边缘漂亮和平滑，需要 PNG 的 8 位透明度，这需要 IE6 的 PNG 渲染 hack。虽然不是世界末日。
不幸的是，虽然内容会按预期滚动，但永远不会显示固定位置的元素
这是个问题吗？它们本质上只是装饰性的。
我尝试在 .body 和 .html 元素上设置溢出：滚动和高度：768
对于这种方法，您需要设置'overflow: auto; height: 768px;' 在一个包装器
【讨论】：
您可以有两张图片：1) 右图包含右树和底部页脚图像，以及 2) 左图包含左树。使底部页脚比需要的宽得多，并且树木（左和右）比它们需要的高得多。
然后将右图设置为bottom:和right:，并将左图设置为bottom:left:。这将强制图片始终位于页面外部，无论浏览器大小如何。然后将右图的z-index设置在左图的后面。然后它总是看起来像页面将被加边框。或者您可以在父容器上设置一个固定的宽度和高度，它们将始终位于容器的边框上。如果您需要一定的最小尺寸，您还可以设置最小宽度和高度。
至于在特定分辨率下不可见的东西，你真的无法解决这个问题。您可以有两组图片，一组用于正常分辨率，一组用于较小分辨率。然后就可以用jQuery得到$(window).height()和$(window).width()浏览器的宽高，并加载相应的图片。
编辑：查看您的网站后，我很确定第二部分（为容器设置固定宽度，然后放置右下角图片和左下角图片）将满足您的需求。这将强制页面具有一定的宽度，从而使整个边框可见。
【讨论】：