How to change height div on window resize?

jquery window height

95,197

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.

Solution 5

Use the resize event.

This should work:

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

View more solutions

95,197

Author by

Admin

Updated on April 04, 2020

Comments

Admin about 4 years
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
zhangha2010 about 14 years

You don't need the resize event handler within your $(document).ready
zhangha2010 about 14 years

What you should also do in that case is make sure you set the height in the correct place. Don't make a mistake I once did, and set the height of the two div's that comprised my page, then set the width of one of the columns - which changed the height, resulting in an overflow situation.
aaaidan over 11 years

I think the world would be a better place if this solution was edited so that the ready and resize calls shared a single function, rather than using duplicated code. People tend to copy-paste javascript code pretty blindly: why not show them the best practice?
Crackertastic over 10 years

+1 for resize event. I was having a similar problem and this helped out nicely. I will be following aaaidan's advice though and throwing this in a single function.
bioffe almost 10 years

In resize handler you can not use $(document) node. I'd suggest using $(this) selector since this is being resized.
Bobort almost 9 years

Be sure to have the HTML5 doctype in the HTML file. Decreasing window size does not work with these methods unless you add this to the top of the HTML file: <!doctype html>