Lo siento si se trata de un problema antiguo o conocido, pero no he podido encontrar una respuesta en línea. Si tengo el códigoLa altura heredada de un elemento secundario secundario de un elemento primario con un atributo de altura mínima
<style>
html, body { height: 100%; width: 100%;}
#div1 {height:50%; min-height:200px;background-color:red;}
#div2 {height:100%; background-color:black;}
</style>
<body>
<div id="div1"><div id="div2"></div></div>
</body>
Luego, en firefox el div interior negro se encoge como la pantalla se encoge y se detiene en 200 píxeles de altura. Sin embargo, en un navegador webkit el div rojo exterior se detiene pero el div interno continúa encogiéndose como si estuviera en un div principal sin el atributo min-height.
¿Existe una solución fácil para alinear la versión de webkit con la representación de Firefox? Un min-height:inherit funciona si se coloca en el div interno, pero en el caso de muchos divs dentro de uno, esto requeriría min-height:inherit en cada div infantil. ¿Hay alguna solución más elegante?
Gracias por la respuesta, es la primera vez que encuentro que la representación de firefox y webkit es diferente y me estaba llevando por la pared. – Phil
+1 por mencionar la especificación CSS; eso aclara los problemas para mí. Curiosamente, si especifica la altura del niño como 'min-height: 100%' en vez de 'height: 100%', funciona, pero solo en Opera. En mi opinión, este debería ser el comportamiento adecuado, pero no así, de acuerdo con la especificación. Tal vez alguien debería presentar un error en contra de la especificación :) –