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

Question

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

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

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

谢谢

Answer 1

您还需要在 resize 事件中执行此操作，请尝试以下操作：

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

Answer 2

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

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

当然这有点愚蠢，因为它可以用 CSS 更简单地完成。但如果涉及到计算，那就另当别论了。例如，这个示例使 div 填充窗口底部，减去一点软糖因子。

$(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);
}

Answer 3

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

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

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

Answer 4

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

Answer 5

使用resize事件。

这应该有效：

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

Answer 6

$(document).ready(function() 
{

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

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

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

});