How to change height div on window resize?

I have a div on my website that should be the height of the window. This is what i got:

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

However, it does not automatically change when the window is resized? Does any body know how to fix this?

Thanks

Solution 1:

You also need to do that in resize event, try this:

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

Solution 2:

Just to show the DRY-up suggested in the comment on the accepted answer:

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

And of course this is kind of silly since it is something that could be done with CSS more simply. But if there were a calculation involved that would be a different story. Eg this example which makes a div fill the bottom of the window, minus a little 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);
}

Solution 3:

Some clarification on this, in order for the window to resize correct after each callback you must clarify which height to retrieve.

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

Otherwise, from my experience, the height will keep increasing now matter how you resize the window. This will take the height of the current window.

Solution 4:

In addition to what others have said make sure you extract the event handler code into a separate function and call it from ready and resize event handlers. That way if you add some more code or need to bind it to other events you will have only one place where to change code logic.