如何在窗口调整大小时更改高度 div？答案

【问题标题】：How to change height div on window resize?如何在窗口调整大小时更改高度 div？
【发布时间】：2011-02-15 01:32:08
【问题描述】：

我的网站上有一个 div，它应该是窗口的高度。这是我得到的：

    $(document).ready(function() {
    var bodyheight = $(document).height();
    $("#sidebar").height(bodyheight);
});

但是，当窗口调整大小时，它不会自动改变吗？有没有人知道如何解决这个问题？

谢谢

【问题讨论】：

有什么具体原因不能用 CSS 处理这个问题吗？ JS 解决方案在“某些”浏览器上充其量是不稳定的（我想不需要命名野兽）......
jsfiddle.net/53hoq9w7

标签： jquery window height

【解决方案1】：

你还需要在resize事件中这样做，试试这个：

$(document).ready(function() {
    $(window).resize(function() {
        var bodyheight = $(this).height();
        $("#sidebar").height(bodyheight);
    }).resize();
});

【讨论】：

我认为，如果编辑此解决方案以使 ready 和 resize 调用共享一个函数，而不是使用重复的代码，那么世界将会变得更美好。人们倾向于盲目地复制粘贴 javascript 代码：为什么不向他们展示最佳实践？
+1 用于调整大小事件。我遇到了类似的问题，这很好地帮助了我。不过，我将遵循 aaaidan 的建议并将其放入一个函数中。
在调整大小处理程序中，您不能使用$(document) 节点。我建议使用 $(this) 选择器，因为它正在调整大小。

【解决方案2】：

$(document).ready(function() 
{

     $(window).on("resize",function() {

          var bodyheight = $(document).height();

          $("#sidebar").height(bodyheight);
     });

});

【讨论】：

【解决方案3】：

只是为了显示在已接受答案的评论中建议的 DRY-up：

$(document).ready(function() {
  body_sizer();
  $(window).resize(body_sizer);
});
function body_sizer() {
  var bodyheight = $(window).height();
  $("#sidebar").height(bodyheight);
}

当然，这有点愚蠢，因为它可以用 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);
}

【讨论】：

确保 HTML 文件中包含 HTML5 文档类型。除非您将其添加到 HTML 文件的顶部，否则减小窗口大小不适用于这些方法：<!doctype html>

【解决方案4】：

对此进行一些澄清，为了在每次回调后正确调整窗口大小，您必须澄清要检索的高度。

    $(document).ready(function() {
       $(window).resize(function() {
          var bodyheight = $(window).height();
          $("#sidebar").height(bodyheight);
       }); 
    });

否则，根据我的经验，无论您如何调整窗口大小，高度都会不断增加。这将采用当前窗口的高度。

【讨论】：

【解决方案5】：

除了其他人所说的之外，请确保将事件处理程序代码提取到一个单独的函数中，并从ready 和resize 事件处理程序中调用它。这样，如果您添加更多代码或需要将其绑定到其他事件，您将只有一个地方可以更改代码逻辑。

【讨论】：

在这种情况下您还应该做的是确保将高度设置在正确的位置。不要犯我曾经做过的错误，并设置组成我页面的两个 div 的高度，然后设置其中一列的宽度 - 这改变了高度，导致溢出情况。

【解决方案6】：

使用resize 事件。

这应该可行：

 $(document).ready(function() {
   $(window).resize(function() {
    var bodyheight = $(document).height();
    $("#sidebar").height(bodyheight);
}); });

【讨论】：

您不需要在 $(document).ready 中使用 resize 事件处理程序