我有一个包装器定位为中心与y重复的背景图像：
<body>
<div id="wrapper">
...some content
</div>
</body>
#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background-image: url(image.jpg) 250px 0px repeat-y;
}
问题：当窗口大小高于从其内容继承的包装器的高度时，图像显然不会在y轴上重复到窗口的底部。
我已经使用jQuery根据实际的文档高度来动态地应用内联CSS样式到包装器(当DOM准备就绪并且在窗口大小调整事件时)：
$(function(){
$('#wrapper').css({'height':($(document).height())+'px'});
$(window).resize(function(){
$('#wrapper').css({'height':($(document).height())+'px'});
});
});
这种方法的问题是，每次将窗口高度扩展到大于先前调整大小的最大尺寸的大小时，文档高度会通过此差异延伸，如果您无限期地重新调整窗口大小并且具有无穷大的本质上使包装器DIV无限大垂直显示空间。
在具有1600px高度的典型的30“英寸显示器上，当用户打开窗口高度为1000px的网站，并且包装器的高度为800px时，上面的jQuery将高度设置为1000px，正确地平铺了背景图像，此时，一旦用户将窗口大小为1400像素，1400像素是一个新的文档大小“记住默认”，即使用户将窗口重新调整到原始的1000px高度，并将底部的滚动条高度添加400px，也不会自动更新。
如何解决这个问题？
更新：(窗口).height似乎不起作用，因为窗口高度是一个视口高度。当您的视口小于内容并滚动它时，包装器始终保持视口的大小，并且不会延伸到当前视口位置的底部。
解决方法
我在某人答复的帮助下，想出了自己。但他因某种原因删除了它。
这是解决方案：
>删除所有CSS高度黑客和100％的高度
>使用2个嵌套的包装器，一个在另一个中。 #wrapper和#truecontent
>获取浏览器视口的高度。如果它大于#wrapper，则为#wrapper设置内联CSS以匹配当前浏览器的视口高度(同时保持#truecontent完整)
>侦听(窗口).resize事件，并且只应用内联CSS高度如果视口大于#truecontent的高度，否则保持不变
$(function(){
var windowH = $(window).height();
var wrapperH = $('#wrapper').height();
if(windowH > wrapperH) {
$('#wrapper').css({'height':($(window).height())+'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var wrapperH = $('#wrapper').height();
var differenceH = windowH - wrapperH;
var newH = wrapperH + differenceH;
var truecontentH = $('#truecontent').height();
if(windowH > truecontentH) {
$('#wrapper').css('height',(newH)+'px');
}
})
});
