Haz que una div ocupe todo el espacio vertical disponible?

Question

estoy tratando de hacer un diseño que se parece a esto:

Tanto las partes superior e inferior tienen una altura definida, sin embargo quiero las dos secciones izquierda/derecha en el medio para ocupar todo el vertical disponible espacio. Esto es lo que obtuve hasta ahora.

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

hice las secciones medias una exacta 500px simplemente como un escaparate, pero como se puede ver, también en mal estado la sección de centro derecha, y la sección inferior derecha.

Answer 1

¿Estás hablando de algo como esto:

Fullscreen (fuente vinculada a continuación)

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

Aquí van: http://jsfiddle.net/xTh5f/3/

Mis cambios:

html, cuerpo, #wrapper, #middle, #middleleft, #middleright se da 'altura: 100%'

A continuación, # middleleft tiene desbordamiento de 'float: left' y #middleright '; oculto';

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