Dynamic Container Height (jQuery Only)

Question

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

Answer 1

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

var expandingDiv = $('...');
$(window).resize(function(e) {
    expandingDiv.height(document.documentElement.clientHeight - (180 + 50));
});