CSS: Sizing column to fit all but bottom 100px of a div

I have another CSS problem. A layout that escapes me.

I could, I suppose, get the desired effect by messing about with JavaScript, but that always bugs me - it leads to having the code that controls the layout split between the markup file and the CSS file and the javascript file, and that just makes maintenance a mess.

I've created an example of what I don't quite want: http://jsfiddle.net/4sCKq/1/

The split between header and body is fixed - it's a project-wide thing that I can't change for this page. You'll 开发者_StackOverflow社区notice that the header has a fixed height, and the body takes up the rest. This cannot change.

The problem is the left div, within the body.

You'll notice here that the left div has a fixed width, and the main div takes up the rest. This also cannot change.

You'll notice that the left div has a variable height, taking up what is left of the browser window, from the header down. Yep, this is also required.

And at the bottom of the left div I have a fixed-size div, that has the same width as the left div, and a fixed height, and that stays at the bottom, as the window resizes. This is also required.

What is left is the left-main div. I want this to take up all of the left div that is not contained by the left-bottom div. That is, between the two of them, left-main and left-bottom should completely fill the left div, regardless of the size of the browser window. But, as the window resizes, it should be the left-main div that grows and shrinks, the left-bottom div should remain at the bottom of the window, and its size should stay constant.

I've added the show-top and show-bottom divs solely to make it clear where the limits of the left-main div are. If you give left-main a large enough height, it looks like it is filling the div, but in fact it is disappearing behind the left-bottom div. The fact that you can't see the show-bottom div reveals that. I cannot have this - I need all of what is within the left-main to be visible.

So, any ideas?

Rather than define a height you can define the bottom absolute pixel value. Changing one line in your jsfiddle seems to do it, if i understand the question:

#left-main
{
    background-color: #AA9977;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 100px;
}

I was able to get this done pretty easily using some basic jQuery. If you decide to go that route, feel free to use this.

LIVE DEMO http://jsfiddle.net/Jaybles/4sCKq/5/

Here's the magic.

$(window).resize(function(){
    var freeSpace = $('#left').height() - $('#left-bottom').outerHeight();
    if (freeSpace>=150) freeSpace=150;
    $('#left-main').height(freeSpace);
});

UPDATE After seeing the answer from RSG, I'm not sure I got exactly what you were looking for. My code simply prevents the top div from going behind the bottom one, and does not stretch the div to maximize space. If you wanted to accomplish what RSG did, you can do the following (although RSG's answer is MUCH better as there is no flickering)

$(window).resize(function(){
    var freeSpace = $('#left').height() - $('#left-bottom').outerHeight();
    $('#left-main').height(freeSpace);
});