Divs escala CSS en diseño flotante

Quiero crear un diseño de escalado automático sin usar la propiedad de altura. Uso un diseño de flotante entre dos divs, como se muestra en la imagen. Las casillas en el medio tienen un contenido de diferente tamaño y quiero que las casillas se escalen de tal manera que todas tengan la misma altura.

Imagen pintoresca

Intenta leer este artículo en css-tricks.

Mi elección favorita es probablemente la que se tomó del blog de Paul Irish en HTML5Rocks , sin embargo, depende de los navegadores modernos. Creé un JSFiddle basado en su código:

CSS

 .box { /* basic styling */ width: 100%; height: 95px; border: 1px solid #555; font: 14px Arial; /* flexbox setup */ display: -webkit-box; -webkit-box-orient: horizontal; display: -moz-box; -moz-box-orient: horizontal; display: box; box-orient: horizontal; } .box > div { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } /* our colors */ .box > div:nth-child(1){ background : #FCC; } .box > div:nth-child(2){ background : #CFC; } .box > div:nth-child(3){ background : #CCF; } 

HTML

 
A
B
C

Sin embargo, tenga en cuenta que esto no funcionará con los navegadores heredados, y si los está orientando a ellos, le sugiero que simplemente adopte un diseño de tabla.

He hecho un JsFiddle .

Lo que básicamente hago es usar la position:absolute en combinación con la propiedad CSS top e bottom para forzar al div interno a tomar la altura máxima.

HTML:

 

CSS:

 body{ margin: 0px; padding: 0px; border: 0px; } #top{ width: 100%; height: 30px; background: blue; position: absolute; } #bottom{ width: 100%; height: 30px; background: yellow; position: absolute; bottom: 0px; } #middle{ width: 30%; position: absolute; top: 30px; bottom: 30px; background: gray; } 

coloca el medio en un div y haz los tres div en su interior y dales una altura del 100%

Use min-height . Ejemplos de esta propiedad se proporcionan a continuación.

MDN

MSDN