CSS 100% de altura del contenedor con altura mínima

Question

Tengo una situación en la que intento que un elemento ocupe el 100% de la altura de su contenedor y el elemento del contenedor solo tiene una altura mínima especificada. Lamentablemente, cuando hago esto, la directiva de altura se ignora. Here is an example. El div "b", el rojo, debe llenar el padre completo. No, no en IE7, Chrome o FF3.6.

Si tenía "altura: 1px" en el contenedor, el "a" div, luego "b" se estira a toda la altura de "a". See here. Pero esto solo en FF3.6 e IE7, no en Chrome. Así que supongo que estoy haciendo algo mal aquí.

Siento que este es un problema común que debe haber una solución a eso que simplemente no estoy viendo. ¿Cuál es la mejor manera de lograr estirar a la altura en este caso?

Answer 1

Su CSS significa que la altura del elemento secundario es 100% de la altura especificada del elemento principal. Si no especifica una altura para el padre, entonces el 100% no significa nada. Por lo tanto, no funciona.

Lo que se quiere se puede lograr mediante el uso de position:relative en la matriz y position:absolute en el niño:

http://jsfiddle.net/57EZn/25/

No es una solución hermosa pero hace lo que está después.