jQuery: dynamic HTML dimension

i use 1 div element to make the .background for my site. and it's will be 100% height. to achieve that i use jQuery dimensions utility.

<div class="background"></div>

with this script to get the height

$('.background').css( 'height', $(window).height() );

but now, i want to make it's height dynamic. if we resizing the browser. the height of .background will follow the new size of browser. i understand this will require some event since t开发者_C百科he size change after the page is first rendered.

can you please tell how to make it with jQuery?

Use .resize().

$(window).resize(function() {
  $('.background').css( 'height', $(window).height() );
});

Take a look at http://api.jquery.com/resize/.

You'll have to add the same code above to the window's resize event.

Shouldn't you be using css fixed positioning? This lets you set the height, width and position of an element relative to the viewport (the browser window).

Take a look at http://www.w3schools.com/Css/pr_class_position.asp