CODEWITHSUNDEEP
jquerywindowheight
user278139
user278139

Reputation:

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

Upvotes: 30

Views: 98912

Answers (6)

Sarfraz
Sarfraz

Reputation: 382606

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();
});

Upvotes: 54

Dinesh
Dinesh

Reputation: 381

$(document).ready(function() 
{

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

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

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

});

Upvotes: 0

elc
elc

Reputation: 1952

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);
}

Upvotes: 7

toddward
toddward

Reputation: 51

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.

Upvotes: 5

Giorgi
Giorgi

Reputation: 30873

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.

Upvotes: 4

Pekka
Pekka

Reputation: 449385

Use the resize event.

This should work:

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

Upvotes: 1

Related Questions