Search code examples
jquerycsshtmlpositioning

Header, main, footer stretch to fill page

I would like to have the following kind of HTML:

<header></header>
<div id='main'></div>
<footer></footer>

where all are preferably positioned relatively. The header and footer will have known height. I'd like the main div to, by default, fill up the entire page, with the header at the very top of the page and the footer at the very bottom of the page.

Help?

Solution

  • using jquery:

    $(function() {
     var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight());
     $("#main").css("min-height",height+"px");
});

    What we did basically is set the main div height to the browser viewport height and subtracted the height of the header and the footer.

    I hope that helps :)