Как изменить высоту 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);
     });

});