Posted By

dloop on 10/16/11


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

robfahy
spee66


Jquery: 100% Height (html, body)


 / Published in: jQuery
 

Declare html, body {height: 100%} in your css. Subtract all divs with a given height, such as a header, navigation and a footer. Like this: "#header" - "#navigation" - "#footer" + "px". Then add the element you need at 100% height.

  1. $(document).ready(sizeContent);
  2. $(window).resize(sizeContent);
  3. function sizeContent() {
  4. var newHeight = $("html").height() - $("#subtract-all-other-divs").height() + "px";
  5. $("#the-div-you-need-100%-height").css("height", newHeight);
  6. }

Report this snippet  

You need to login to post a comment.