CODEWITHSUNDEEP
javascriptjqueryhtmldom
GusDeCooL
GusDeCooL

Reputation: 5761

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 the size change after the page is first rendered.

can you please tell how to make it with jQuery?

Upvotes: 0

Views: 237

Answers (3)

sj26
sj26

Reputation: 6833

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

Upvotes: 0

Demian Brecht
Demian Brecht

Reputation: 21378

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

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

Upvotes: 2

sje397
sje397

Reputation: 41862

Use .resize().

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

Upvotes: 3

Related Questions