Take the 2-minute tour ×

I have a fixed-height (180px) header and fixed-height footer (50px). I'd like the container height to be: window height MINUS header MINUS footer. If the container height can be updated on window resize, that'd be awesome!

How do I achieve this using jQuery?

I posted the same question and receive a great answer with a CSS only solution, it works but still have issues in IE6 and 7, so I'd like a jquery Only solution if possible.

Many thanks

share|improve this question
Can you post a link to the previous question you asked? I'm interested in reading the answers. –  Guillaume Flandre Dec 14 '09 at 15:16
add comment

1 Answer

up vote 4 down vote accepted

You can use the resize event, like this: (untested)

var expandingDiv = $('...');
$(window).resize(function(e) {
    expandingDiv.height(document.documentElement.clientHeight - (180 + 50));
share|improve this answer
Or use $(window).height() - seems to be more consistent than document.offsetHeight across different browsers and versions. –  GalacticCowboy Dec 14 '09 at 15:18
add comment

Your Answer


