Div entre el div dividido y la altura del contenedor div cuando el contenedor tiene altura: ¿automático?

Question

Tengo un contenedor div y dos divs anidados dentro. No tengo control sobre el contenido de ninguno de estos divs anidados.

Lo que esencialmente necesito es que los dos divs anidados tengan siempre la misma altura. Pensé que esto se puede lograr dando la altura del div del contenedor: auto para que pueda estirar su propia altura hasta el más alto de los dos divs anidados (cada uno de los cuales se extiende para ajustarse a su propio contenido), y luego el otro div anidado se estiraría al 100% de la altura del contenedor.

Esto es lo que he intentado:

Estilo:

#container{ 
    background-color:#FF0; 
    overflow:auto; 
} 

#left{ 
    float:left; 
    height:100%; 
    width:20%; 
    background-color:#F00; 
} 

#right{ 
    height:100%; 
    width:60%; 
    background-color:#0F3; 
} 

HTML:

<div id="container"> 

<div id="left"> 
    <p>Content</p> 
    <p>Content</p> 
    <p>Content</p> 
</div> 

<div id="right"> 
    <p>Content</p> 
    <p>Content</p> 
</div> 

</div> 

Pero esto no funciona. El contenedor se estira para ajustarse al div más largo ("izquierda" en este caso) pero el div anidado más corto ("right") no se estira.

Nótese, sin embargo, que esto funciona si doy el contenedor una altura específica:

#container{ 
    background-color:#FF0; 
    overflow:auto; 
    height:300px; 
} 

¿Hay alguna manera de conseguir que esto funcione sin tener que recurrir a las tablas?

Answer 1

La nota importante es que el valor porcentual de altura desaprobado hace un tiempo. Entonces tienes que usar otro patrón.

La mayoría de las veces (especialmente en su caso) la altura de los paneles se establece automáticamente. Así que es mejor para aumentar la altura con un poco de javascript

<script> 
    function IncreaseHeight() 
    { 
     var first = Document.getElementById("Right").style.height; 
     var second = Document.getElementById("Left").style.height; 

     if(first < second) 
     Document.getElementById("Right").style.height = Document.getElementById("Left").style.height; 
     else 
     Document.getElementById("Left").style.height = Document.getElementById("Right").style.height; 
    } 
</script> 

nota de que cambie el lugar de derecho y base izquierda onyour caso.

Answer 2

Las dos formas más comunes de hacer esto son Faux Columns usando imágenes o estableciendo las alturas a valores iguales con JavaScript. Hice una proyección de pantalla para demostrar la segunda técnica, Equalizing Column Heights with jQuery. La técnica podría adaptarse fácilmente para otras bibliotecas o para JavaScript simple.