How to change height div on window resize?

Question

Hi Guys,

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

Answer 1

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

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

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

Answer 2

Use the resize event.

This should work:

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

Answer 3

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.

Answer 4

this is not working..