我有一个包装器，位于中心位置，并带有 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 无限大垂直展示空间。
在典型的 30 英寸高度为 1600px 的显示器上，当用户打开窗口高度为 1000px 且包装器高度为 800px 的网站时，上面的 jQuery 将高度设置为 1000px，正确平铺背景图像。此时，一旦用户扩展了窗口大小为例如 1400px，1400px 是“记住的默认值”的新文档大小，即使用户将窗口大小调整回原始 1000px 高度，也不会自行更新，添加距滚动条高度 400px在底部。
如何解决这个问题？
更新： (window).height 似乎不起作用，因为窗口高度是视口高度。当您的视口小于内容并滚动它时，包装器始终保持视口的大小，并且不会延伸到当前视口位置的底部。
我在某人的回答的帮助下自己弄清楚了。但他出于某种原因删除了它。
这是解决方案：
- 删除所有 CSS 高度 hack 和 100% 高度
- 使用 2 个嵌套的包装纸，一个在另一个中，例如#wrapper 和 #truecontent
- 获取浏览器视口的高度。如果它大于 #wrapper，则为 #wrapper 设置内联 CSS 以匹配当前浏览器视口高度（同时保持 #truecontent 不变）
-
监听 (window).resize 事件，如果视口大于 #truecontent 的高度，则仅应用内联 CSS 高度，否则保持不变
$(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');
}
})
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
