div interior tiene que ser 100% Altura

Question

Aquí está mi HTML:

<div id="container"> 
    <div id="left-container"> 
    </div> 

    <div id="right-container"> 
    </div> 
</div> 

El contenedor es la altura del 100% (lo he comprobado con Firebug). ¡Pero el #left_container necesita ser 100% también y no lo es!

A continuación se muestra mi CSS y screenshot. El amarillo debe ser 100%. El amarillo es el fondo de la #left-container

html, body { 
    height: 100%; 
} 
#container { 
    position:relative; 
    margin: 0 auto; 
    width: 100%; 
    height:100%; 
    height: auto !important; 
    min-height:100%; 
    background: #fff; 
} 
#left-container { 
    width: 300px; 
    background: #ff0; 
    height:100%; 
    height: auto !important; 
    min-height:100%; 
} 

Answer 1

En este artículo se analiza tanto el problema y la solución en detalle:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Esto podría ayudar también:

<style> 
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; } 
    #inner {position:absolute; height:100%; width:20px; border:1px solid black; } 
</style> 

<div id='outer'> 
    <div id='inner'> 
    </div> 
    text 
</div> 

Vea aquí para más detalles sobre lo anterior:
How to make a floated div 100% height of its parent?

Answer 2

Usted debe ser capaz de utilizar simplemente

margin:0; 
padding:0; 
height:100%; 

Para los conatainers para conseguir lo que desea.

Answer 3

La mejor manera de abordar este problema es pensar fuera de la caja un poco. No hay ninguna razón por la que ambos contenedores deban estirarse al 100% si solo está preocupado por el estiramiento de fondo para ambos. Hay una técnica realmente simple llamada Faux Columns en la que se combinan los fondos para ambas barras laterales en una sola imagen de fondo, y se establece el fondo del contenedor principal para esa imagen. Cuando una barra lateral más larga estira el contenedor principal, baja el fondo de ambas barras laterales.