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