"Whatever is Left" in a CSS layout

Question

I have 4 elements inside a container element. The container element will have its height set to 100% of the browser window. The 4 inner elements will appear vertically stacked on each other (as normal). The first two elements and the last element should have a "natural" height (ie: enough to fit their contents). The 3rd element should expand to fill the space available in the container, after the other 3 eat all they need to.

So, it would look something like this:

I cannot set explicit heights for Element-1, Element-2, or Element-4, nor do I know the height of the Container. I don't know the natural height of Element-3 either; I plan on using overflow-scroll if it gets larger then what's available. I've added spacing between the elements for illustration, but there will be spacing (margins/padding) between the real elements too.

How do you achieve this using HTML/CSS? If compromises have to be made to get a decent layout, I'll consider them. Bonus points if the technique also applies horizontally (which I've needed on occasion).

Answer 1

First off, great visual.

Secondly.. would a javascript solution be out of the question?

Update

This was just intended to be a sample, but I have updated the code to appease some of the more picky people out there.

http://jsfiddle.net/tsZAV/9/