How to change height div on window resize?

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

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

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.