我正在尝试创建一个 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; 高度：768px；' 在包含您的#sidebar-left 和您的#content 的包装器 <div> 上。
您可以有两张图片：1）包含右树和底部页脚图像的右图和 2）包含左树的左图。使底部页脚比需要的宽得多，树木（左和右）比它们需要的高得多。
然后将右图设置为bottom:和right:，并将左图设置为bottom:left:。这将强制图片始终位于页面外部，无论浏览器大小如何。然后将右图的z-index设置在左图的后面。然后它总是看起来像页面将被加边框。或者您可以在父容器上设置一个固定的宽度和高度，它们将始终位于容器的边框上。如果您需要一定的最小尺寸，您还可以设置最小宽度和高度。
至于在某个分辨率下不可见的东西，你真的无法解决这个问题。您可以有两组图片，一组用于正常分辨率，一组用于较小分辨率。$(window).height()然后就可以用jquery和jquery获取浏览器的宽高$(window).width()，加载相应的图片。
编辑：查看您的网站后，我很确定第二部分（为容器设置固定宽度，然后放置右下角图片和左下角图片）将满足您的需求。这将迫使页面具有一定的宽度，从而使整个边框可见。