jQuery 如何正确设置 100% DIV 高度以匹配文档/窗口高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9214040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to properly set the 100% DIV height to match document/window height?
提问by DominiqueBal
I have a wrapper positioned to center with an y-repeated background image:
我有一个以 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;
}
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.
问题：当窗口大小高于从其内容继承的包装器高度时，图像显然不会在 y 轴上一直重复到窗口底部。
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):
我已经使用 jQuery 根据实际文档高度动态地将内联 CSS 样式应用到包装器（当 DOM 准备好和窗口调整大小事件时）：
$(function(){
$('#wrapper').css({'height':($(document).height())+'px'});
$(window).resize(function(){
$('#wrapper').css({'height':($(document).height())+'px'});
});
});
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.
这种方法的问题在于，每次将窗口高度扩展到比先前调整后的最大尺寸更大的尺寸时，文档高度会因这种差异而扩展，如果您继续无限地调整窗口大小并具有无限垂直展示空间。
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 heightat the bottom.
在典型的 30" 英寸显示器上，高度为 1600 像素，当用户打开网站时，窗口高度为 1000 像素，包装器高度为 800 像素，上面的 jQuery 将高度设置为 1000 像素以正确平铺背景图像。此时，一旦用户扩展窗口大小为例如 1400 像素，1400 像素是一个新的文档大小“记住的默认值”，即使用户将其窗口大小调整回原始 1000 像素的高度，也不会自行更新，在底部的滚动条高度上增加400 像素。
How to fix this?
如何解决这个问题？
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.
更新： (window).height 似乎不起作用，因为窗口高度是视口高度。当您的视口小于内容并滚动它时，包装器始终保持视口的大小并且不会延伸到当前视口位置的底部。
回答by DominiqueBal
I figured it out myself with the help of someone's answer. But he deleted it for some reason.
我在某人的回答的帮助下自己弄明白了。但他因为某种原因删除了它。
Here's the solution:
这是解决方案：
- 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'); } }) });
- 删除所有 CSS 高度技巧和 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'); } }) });
回答by Tharindu Liyanage
The easiest way is to add the:
最简单的方法是添加：
$('#ID').css("height", $(document).height());
after the correct page height is determined by the browser. If the document height is changed once more re-run the above code.
在浏览器确定正确的页面高度之后。如果再次更改文档高度，请重新运行上述代码。
回答by Jovan Perovic
You could make it absoluteand put zeros to topand bottomthat is:
你可以做到absolute并把零给top，bottom那就是：
#fullHeightDiv {
position: absolute;
top: 0;
bottom: 0;
}
回答by hlv
simplest way i found is viewport-height in css..
我发现的最简单的方法是 css 中的 viewport-height ..
div {height: 100vh;}
this takes the viewport-height of the browser-window and updates it during resizes.
这需要浏览器窗口的视口高度并在调整大小期间更新它。
回答by Will
html, body {
height:100%;
}
#wrapper {
min-height:100%;
}
回答by Arthur Kielbasa
this is how i answered that
我就是这样回答的
<script type="text/javascript">
function resizebg(){
$('#background').css("height", $(document).height());
}
$(window).resize(function(){
resizebg();
});
$(document).scroll(function(){
resizebg();
});
//initial call
resizebg();
</script>
css:
css：
#background{
position:absolute;
top:0;
left:0;
right:0;
}
so basically on every resizing event i will overwrite the height of the div in this case an image that i use as overlay for the background and have it with opacity not so colorful also i can tint it in my case with the background color.
所以基本上在每次调整大小事件时，我都会覆盖 div 的高度，在这种情况下，我将图像用作背景的叠加层，并使其不透明度不那么丰富多彩，我也可以在我的情况下用背景颜色对其进行着色。
but thats another story
但那是另一个故事
回答by kishan phadte
Use #element{ height:100vh}
用 #element{ height:100vh}
This will set the height of the #elementto 100% of viewport.
Hope this helps.
这会将 的高度设置为 的#element100% viewport。希望这可以帮助。
回答by t q
hows this
这个怎么样
<style type="text/css">
#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background: url('image.JPG') 250px 0px repeat-y;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function handleResize() {
var h = $(window).height();
$('#wrapper').css({'height':h+'px'});
}
$(function(){
handleResize();
$(window).resize(function(){
handleResize();
});
});
</script>
</head>
<body>
<div id="wrapper">
...some content
</div>
</body>
回答by Navneeth G
why don't you use width: 100%and height: 100%.
你为什么不使用width: 100%和height: 100%。
