Make a Div take up all Available Vertical Space?

Question

I'm trying to do a layout that looks like this:

Both the top and bottom parts have a defined height, however I want the two left/right sections in the middle to take up all available vertical space. Here's what I got so far.

http://jsfiddle.net/xTh5f/2/

I made the middle sections an exact 500px just as a showcase, but as you can see, I also messed up the middle right section, and the bottom right section.

Answer 1

Are you talking about something like this:

Fullscreen (source linked below)

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;;
    color: white;
}
#wrapper {
    display: table;
    width: 100%;
    height: 100%;
}
#wrapper > div {
    display: table-row;
}
#wrapper > div > div {
    display: table-cell;
}
#top,
#bottom {
    height: 50px;
}
#wrapper > div > #topleft,
#wrapper > div > #middleleft,
#wrapper > div > #bottomleft {
    width: 300px;
}
#wrapper > div > #middleleft {
    background: #23A9E0;
}
#wrapper > div > #middleright {
    background: #39E023;
}
#wrapper > div > #topright,
#wrapper > div > #bottomright {
    background: #208D11;
}
#wrapper > div > #topleft,
#wrapper > div > #bottomleft {
    background: #092A7C;
}

http://jsfiddle.net/xTh5f/4/

Answer 2

Here you go: http://jsfiddle.net/xTh5f/3/

My changes:

html, body, #wrapper, #middle, #middleleft, #middleright is given 'height: 100%'

Next, #middleleft is given 'float: left', and #middleright 'overflow; hidden';

Please see: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/