Как изменить высоту div на размер окна?

У меня есть div на моем сайте, который должен быть высотой окна. Это то, что я получил:

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

Однако при изменении размера окна он автоматически не изменяется? Кто-нибудь знает, как это исправить?

Спасибо

Ответ 1

Вам также нужно сделать это в событии resize, попробуйте следующее:

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

Ответ 2

Некоторые пояснения по этому вопросу, чтобы окно изменяло размер после каждого обратного вызова, вы должны уточнить, какую высоту получить.

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

В противном случае, по моему опыту, высота будет постоянно увеличиваться, независимо от того, как вы изменяете размер окна. Это займет высоту текущего окна.

Ответ 3

В дополнение к тому, что сказали другие, убедитесь, что вы извлекли код обработчика события в отдельную функцию и вызвали его из обработчиков событий ready и resize. Таким образом, если вы добавите еще какой-нибудь код или хотите связать его с другими событиями, у вас будет только одно место, где можно изменить логику кода.

Ответ 4

Просто чтобы показать 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);
}

Ответ 5

Используйте событие resize.

Это должно работать:

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

Ответ 6

$(document).ready(function() 
{

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

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

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

});