"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/

Answer 2

There are a number of things that make this impossible in pure css.

1. The browser window could be shorter than the dynamic height of the first 3 elements.
2. There is no way to force an element to take up the rest of the container's height.
3. CSS is a document styling language, not a programming language. Think of writing CSS as a set of guidelines that the page should try to follow, rather than a way of explicitly setting sizes (although you can explicitly set sizes).

This is relatively simple to do with JavaScript resizing the fourth element. You'll have to listen for a resize event so that the fourth element gets sized accordingly. Also, you'll want to set a min-height value for element-4, in case there isn't enough space for the fourth element.