大佬教程收集整理的这篇文章主要介绍了jquery – 如何正确设置100％DIV高度来匹配文档/窗口高度？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<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');
}
})
});
以上是大佬教程为你收集整理的jquery – 如何正确设置100％DIV高度来匹配文档/窗口高度？全部内容，希望文章能够帮你解决jquery – 如何正确设置100％DIV高度来匹配文档/窗口高度？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。