jQuery 如何在窗口调整大小时更改高度 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2758651/
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 change height div on window resize?
提问by Sarfraz
I have a div on my website that should be the height of the window. This is what i got:
我的网站上有一个 div，它应该是窗口的高度。这是我得到的：
$(document).ready(function() {
var bodyheight = $(document).height();
$("#sidebar").height(bodyheight);
});
However, it does not automatically change when the window is resized? Does any body know how to fix this?
但是，在调整窗口大小时它不会自动更改吗？有没有人知道如何解决这个问题？
Thanks
谢谢
回答by Sarfraz
You also need to do that in resizeevent, try this:
你也需要这样做resize，试试这个：
$(document).ready(function() {
$(window).resize(function() {
var bodyheight = $(this).height();
$("#sidebar").height(bodyheight);
}).resize();
});
回答by toddward
Some clarification on this, in order for the window to resize correct after each callback you must clarify which height to retrieve.
对此进行一些澄清，为了使窗口在每次回调后正确调整大小，您必须阐明要检索的高度。
$(document).ready(function() {
$(window).resize(function() {
var bodyheight = $(window).height();
$("#sidebar").height(bodyheight);
});
});
Otherwise, from my experience, the height will keep increasing now matter how you resize the window. This will take the height of the current window.
否则，根据我的经验，无论您如何调整窗口大小，高度都会不断增加。这将采用当前窗口的高度。
回答by elc
Just to show the DRY-up suggested in the comment on the accepted answer:
只是为了显示对已接受答案的评论中建议的 DRY-up：
$(document).ready(function() {
body_sizer();
$(window).resize(body_sizer);
});
function body_sizer() {
var bodyheight = $(window).height();
$("#sidebar").height(bodyheight);
}
And of course this is kind of silly since it is something that could be done with CSS more simply. But if there were a calculation involved that would be a different story. Eg this example which makes a div fill the bottom of the window, minus a little fudgefactor.
当然，这有点愚蠢，因为它可以用 CSS 更简单地完成。但如果涉及计算，那就是另一回事了。例如，这个例子让一个 div 填充窗口的底部，减去一点点 fudgefactor。
$(function(){
resize_main_pane();
$(window).resize(resize_main_pane);
});
function resize_main_pane() {
var offset = $('#main_scroller').offset(),
remaining_height = parseInt($(window).height() - offset.top - 50);
$('#main_scroller').height(remaining_height);
}
回答by Giorgi
In addition to what others have said make sure you extract the event handler code into a separate function and call it from readyand resizeevent handlers. That way if you add some more code or need to bind it to other events you will have only one place where to change code logic.
除了其他人所说确保你提取的事件处理程序的代码放到一个单独的函数和调用它ready和resize事件处理程序。这样，如果您添加更多代码或需要将其绑定到其他事件，您将只有一个地方可以更改代码逻辑。
回答by Pekka
Use the resizeevent.
使用resize事件。
This should work:
这应该有效：
$(document).ready(function() {
$(window).resize(function() {
var bodyheight = $(document).height();
$("#sidebar").height(bodyheight);
}); });
回答by Dinesh
$(document).ready(function()
{
$(window).on("resize",function() {
var bodyheight = $(document).height();
$("#sidebar").height(bodyheight);
});
});
