jQuery plugin to automatically set remaining height to the last children of the container

Problem

HTML combined with CSS can produce beatiful UI, but often some problems that seem simple ends up forcing the web developers/designers to rely more on javascript just because CSS cannot handle complex calculations.

Today we are going to look at a simple problem that cannot be solved using plain CSS and what other alternatives we have for it

Have a look at the following image

Solution

We need to acheive what is shown in the follwing image

Achieving the above result is as easy as
Container Height - Occupied Height would be remaining height, I mean the height of last child.

But how de we do this on percentage based UIs where the first two children's height is represented in percentage. Here remainingH jQuery plugin comes to the rescue.
Usage:

$('.container').remainingH();

and with options

$('.container').remainingH({
//how long to wait before calculating height of elements
delay: 250,  
//if set to false all the layout operation would be run during call stack itself
asyncCalc: true,  
//jQuery selector to pick the elements which one height to be calculated based on its parent and previous siblings
sel: '.remaining-height'  
    });

Live demo is here: http://vjsrinath.github.io/jquery.remainingH/