2010-09-27 4 views
10

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?

Respuesta

22

Sí, esto es un error WebKit, bug 26559.

height en % en elementos estáticos-o--relativa posicionado se calcula en relación a declarado height la propiedad del bloque que contiene, en lugar de la altura calculada tomando min-height y max-height en cuenta. Lo mismo no ocurre para el ancho.

Puede ver de dónde viene esto en CSS 2.1 que establece que la altura de un bloque contenedor debe establecerse explícitamente para que % funcione. ¡Pero no se establece explícitamente lo que significa "explícitamente"! Los navegadores han interpretado esto como que la propiedad height debe establecerse en un valor que no sea automático, lo cual es suficiente, excepto que height no es todo lo que hay ahora a la altura. Otros navegadores permiten min-height/max-height para afectar la altura que se utilizará, pero no permiten que signifique 'explícito'. WebKit va más allá (y esto definitivamente no es obligatorio por especificación) usando soloheight en el cálculo y no mínimo/máximo.

Como solución alternativa, puede probar el posicionamiento absoluto, que no se ve afectado. Posición relativa el div exterior, posición absoluta el interior en left: 0; top: 0; width: 100%; height: 100%.

+1

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

+0

+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 :) –

3

Creo que son solo las diferencias entre los dos CSS predeterminados del navegador. Pruebe esto:

<style> 
    div {min-height: inherit;} 
    #div1 {height:50%; min-height:200px;background-color:red;} 
    #div2 {height:100%; background-color:black;} 
</style> 

Funciona para mí.

+0

Sí, eso hará el truco. Si está usando span's y otras etiquetas, puede usar '# div1 * {min-height: inherit}' en su lugar. Gracias por la respuesta, ¡es una solución mejor que la mía! – Phil

0

Tuve un problema con min-height en un div vacío en Chrome (OSX 10.6). No sé si es el mismo comportamiento de error pero I encontró mi solución al cambiar el atributo de tamaño de caja.

No funciona en Chrome Mac:

box-sizing:border-box; 
min-height:10px; 
padding-bottom:15px; 
padding-top:30px; 

Trabajando en Chrome Mac:

box-sizing:content-box; 
min-height:10px; 
padding-bottom:15px; 
padding-top:30px; 

Espero que ayude.

0

Me gustaría publicar mi solución, ya que me tomó un tiempo hacer que mi código funcione y quizás alguien lo encuentre útil a pesar de que este es un tema antiguo ...

Tuve un problema similar. Se estaba desbordando una imagen de un bloque padre flexible. Esto solo sucedió en Chrome y Opera (navegadores webkit), Trident y Gecko fueron lo suficientemente inteligentes como para manejar la situación. Intenté algunas soluciones aquí en el desbordamiento de la pila, pero ninguno proporcionó una solución directa, así que he inventado una solución alternativa al agregar otra capa de contenedor entre la imagen mencionada y la principal. En la situación presentada en el puesto de apertura que se vería así:

<style> 
    html, body { height: 100%; width: 100%;} 
    #div1 {height:50%; min-height:200px;background-color:red; position: relative;} 
    #div_fix {position: absolute; height: 100%; width: 100%;} 
    #div2 {height:100%; background-color:black;} 
</style> 
<body> 
<div id="div1"><div id="div_fix"><div id="div2"></div></div></div> 
</body> 

Lo que esto hace es crear un recipiente (#div_fix) que recibe altura estática y anchura que luego pueden ser utilizados adecuadamente en webkit para calcular la altura correcta en # div2. Tenga en cuenta que la posición: relativa y posición: las propiedades absolutas son obligatorias para que funcione.

Y sí, se ve mal, pero hace el trabajo :)

1

Nuestro proyecto necesita que la imagen sea vertical y horizontalmente centrado. Y tenemos que ajustar la imagen de acuerdo con el tamaño de la pantalla. Encuentro que poner la imagen como fondo de resolver el problema:

<style> 
    .parent { 
     height: 100%; 
    } 
    .image { 
     height: 100%; 
     background: url('/path/to/your/image') no-repeat 50% 50%; 
     -o-background-size: contain; 
     -webkit-background-size: contain; 
     -moz-background-size: contain; 
     background-size: contain; 
    } 
</style> 
<div class="parent"> 
    <div class="image"></div> 
</div> 

Aquí 50% 50% hace que la imagen horizontal y verticalmente centrada. Y background-size: contain asegura que el fondo no excede los límites de la matriz (MDN background-size):

contienen Esta palabra clave especifica que la imagen de fondo debe ser a escala en ser tan grande como sea posible al tiempo que garantiza tanto sus dimensiones son inferiores o iguales a las dimensiones correspondientes del área de posicionamiento de fondo .

De esta manera, el elemento primario no necesita especificar unidades absolutas. Aquí height: 100% es suficiente.

Un inconveniente es: la imagen se ampliará para completar el espacio principal.

Cuestiones relacionadas