2011-08-09 36 views
12

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.CSS 100% de altura del contenedor con altura mínima

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?

+0

El contenedor primario debe tener una altura especificada. No solo una altura mínima. – Kyle

Respuesta

11

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.

+0

Ah, sí, como recuerdo, este truco se usa a veces para solucionar otros problemas de diseño. Intenté jugar con la regla de posición, pero no pude encontrar la combinación correcta. Lógicamente, no veo por qué la posición de configuración debería alterar la altura del div interno, pero evidentemente funciona y podría ser capaz de usar esta solución. Gracias. – waxwing

+0

No es solo la 'posición: absoluta' la que lo hace alterar la altura. La altura es alterada por un 'top' especificado y' bottom'. Esto fuerza al elemento secundario a "adherirse" a las posiciones superior e inferior que usted especifica RELATIVO a su padre. 'bottom: 0' en este caso significa" lo más bajo posible dentro del padre ". En otras palabras: "tamaño para que coincida con la altura de tus padres". – Bazzz

+0

Ahora lo entiendo. En otras palabras, también funciona si elimino la directiva "height: 100%" del div interno, porque arriba y abajo hacen el trabajo. – waxwing