[SOLUCIONADO] div a height:100%

[berkeleyPunk]

Hola.

La idea es esta:
Tenemos 2 divs flotados a la izquierda. El 1ro no tiene contenido. El 2do tiene texto. La idea es que al jugar con las dimensiones de la pantalla, el height del 1er div aumente a la par del 2do div.

¿Cómo hacer que el 1er div tenga siempre la misma altura que el 2do div?
Para que funcione el height:100%, su contenedor no debe estar en porcentaje, sino, por ejemplo, en pixeles. Pero no podemos poner pixeles, porque al redimensionar el navegador, el texto se comprime y la altura del div quedaría corta.

He aquí lo que llevo. Todo está bien, salvo porque la altura es estática, es decir, no va a aumentar cuando el texto ya no quepa.


Nota: Entiendo que poniendo a 100% el body y html, se soluciona esto. La cosa es que no trabajo directamente con un doc.html, sino con Joomla. Le he puesto el 100 a su html y body, pero no funciona.

Saludos!

[pzin]

Puedes imitar el comportamiento de una tabla.

Código HTML:

<div id="contenedor">
  <div></div>
  <div></div>
</div>
 

Código css:

#contenedor {
  display: table;
  width: 100%;
}
 
#contenedor > div {
  display: table-cell;
  vertical-align: top;
}
 

Y las alturas en porcentajes dependen del contenedor, así de forma ascendente continua.

[berkeleyPunk]

Iniciado por pzin

Puedes imitar el comportamiento de una tabla...

Excelente, maestro pzin.

Nada que decir, era justo lo que buscaba.


Una cosa más, maestro. Me puse a jugar un poco con la parte responsiva. Y para hacer que los dos divs hijos queden uno sobre otro, basta con ponerles display: table-row. Esto funciona. Pero el padding no jala.

¿Alguna idea para que el padding funcione?

[pzin]

¿No es más fácil y lógico usar display: block para eso?

[berkeleyPunk]

Iniciado por pzin

¿No es más fácil y lógico usar display: block para eso?

Ah! Increíble!

Muy bien, un simple display:block.

Saludos pzin y hasta pronto.