如何在窗口大小调整时更改高度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

对此进行一些澄清,为了在每次回调后调整窗口大小,你必须明确要检索的高度.

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

否则,根据我的经验,高度将继续增加,现在重要的是你如何调整窗口大小.这将采用当前窗口的高度.

Answer 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);
}