如何正确设置100％DIV高度以匹配文档/窗口高度？ [英] How to properly set the 100% DIV height to match document/window height?
问题描述
我有一个包装器，定位到以y重复的背景图像为中心：
I have a wrapper positioned to center with an y-repeated background image:
<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;
}
$ b < ，图像显然不会在y轴上重复到窗口底部。
Problem: when the window size is higher than the wrapper's height inherited from its content, the image obviously doesn't repeat on y-axis all the way to the bottom of the window.
我使用jQuery动态应用内联CSS样式到根据实际文档高度（当DOM准备就绪和窗口调整大小事件时）包装器：
I've used jQuery to dynamically apply inline CSS style to the wrapper according to actual document height (when DOM is ready and on window resize event):
$(function(){
$('#wrapper').css({'height':($(document).height())+'px'});
$(window).resize(function(){
$('#wrapper').css({'height':($(document).height())+'px'});
});
});
这种方法的问题是每次将窗口高度扩展到大于先前调整大小的最大尺寸，文档高度由此差异扩展，如果您持续调整窗口大小并具有无限垂直显示空间，则基本上使包装器DIV无限。
The problem with this approach is that every time one extends the window height to a size larger than the previously resized largest size, the document height extends by this difference, essentially making the wrapper DIV infinite if you keep resizing the window infinitely and have a infinite vertical display space.
典型的30英寸显示器，1600像素的高度，当用户打开网站的窗口高度为1000像素，包装器为800像素高，jQuery上面设置高度为1000px正确地平铺背景图像。此时，一旦用户扩展窗口大小例如1400像素，则1400像素是一种新的文档大小已记住的默认值，即使用户将窗口大小调整为原始的1000像素高度，将 400像素添加到滚动条高度
On a typical 30" inch display with 1600px height, when user opens the website with a window height 1000px and wrapper is 800px high, the jQuery above sets the height to 1000px tiling the background image correctly. At this point, once the user extends the window size to e.g 1400px, the 1400px is a new document size "remembered default" and doesn't update itself even if the user resizes his window back to the original 1000px height, adding 400px to the scrollbar height at the bottom.
如何解决这个问题？
更新：（window）.height似乎不工作，因为窗口高度是视口高度。当您的视口小于内容并且滚动它时，包装器始终保持视口的大小，不会延伸到当前视口位置的底部。
UPDATE: (window).height doesn't seem to work, because window height is a viewport height. When your viewport is smaller than the content and you scroll it, the wrapper always stays the size of the viewport and doesn't extend to the bottom of the current viewport position.
推荐答案
我想出了自己的帮助下，有人的答案。
I figured it out myself with the help of someone's answer. But he deleted it for some reason.
- 这是解决方案：
Here's the solution:
在（窗口）如果视口大于#truecontent的高度，则只应用内嵌CSS高度，否则保持完整
- remove all CSS height hacks and 100% heights
- Use 2 nested wrappers, one in another, e.g. #wrapper and #truecontent
- Get the height of a browser viewport. IF it's larger than #wrapper, then set inline CSS for #wrapper to match the current browser viewport height (while keeping #truecontent intact)
Listen on (window).resize event and ONLY apply inline CSS height IF the viewport is larger than the height of #truecontent, otherwise keep intact
$(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');
}
})
});
这篇关于如何正确设置100％DIV高度以匹配文档/窗口高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
