CSS3 Vertical box flex with just jQuery

Question

How can I do this with jQuery: http://jsfiddle.net/tdskate/C4nAG/

I need a div that automatically adjusts height to however much available vertical space is left.

I tried to calculate it with $('body > *').height() and then subtract the element's height from that... but it doesn't calculate properly when some elements have top or bottom margins.

Also, it needs to resize when the browser window gets resized...

Answer 1

This should work:

$(function() {
    $(window).resize(function() {
        var other_element_heights = 0;

        $('body').children().each(function() {
            other_element_heights += $(this).outerHeight(true);
        });

        other_element_heights -= $('.auto-height').height();

        $('.auto-height').height($(window).height() - other_element_heights);
    }).resize();   
});

http://jsfiddle.net/C4nAG/82/