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

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

});

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

6 个答案: