5.1.1.

21 marzo 2005

Bug Opera: height con porcentajes y contenedor con padding

Categoría

Cuando una caja tiene definida la propiedad height con un valor en porcentaje, la altura se calcula de manera proporcional al de la caja que la contiene.

#padre {height:500px;}
#hijo {height:100%;} /* 100% del contenedor - 500px */

En Opera 7 y 8 beta 3, si el elemento contenedor tiene definido un padding vertical, el valor de éste afectará el calculo del 100% de la altura de las cajas que contenga. Opera parece calcular la altura del contenedor restandole además los valores verticales de padding.

Agregando un padding al ejemplo anterior:

#padre {height:500px;padding-top:10px;}
#hijo {height:100%;}

Siguiendo el ejemplo, el 100% de la altura para #hijo es el resultado de la resta de la altura de #padre (500px) y su padding (10px). Resultado: el 100% es 490px. Ejemplo 1.

Si la altura de #hijo fuera explicítamente 500px se mostraría bien.

Efecto gracioso: ¿que pasaría si el padding vertical fuera igual a la altura? 500px de altura menos 500px de padding da cero, por lo que ¡el elemento #hijo no tiene altura! Ejemplo 2.

Reportado como bug 165956 aunque seguramente será tomando como duplicado.

Powered by Blogger