soy Kseso y esto EsCSS

Hijos con height en porcentaje cuando el padre tiene declarado min-height y no height

Hijos con height en porcentaje cuando el padre tiene declarado min-height y no height

✎ 8
COLABORACIÓN AUTOR INVITADO

Hijos con height en porcentaje cuando el padre tiene declarado min-height y no heightCentrando la situación: tengamos un elemento al que se declara altura mínima min-height en px, pero por ser desconocido y variable a priori el contenido alojado en él (su hijo) no podemos fijar la altura height del padre.

Y la segunda parte del planteamiento, necesitamos que el hijo ocupe toda la altura de su padre. Así que anotamos en su regla height: 100%;

Lo que normalmente esperamos es que el hijo ocupe toda la altura del padre. Pero resulta que no ocurre eso. El resultado, poco intuitivo, es lo que dicen las especificaciones de CSS 2.1.

Nota sobre la autoría: tanto la introducción como el resto del artículo es obra original de Roger Johansson publicado en la página 456 Berea St. Al pie de este artículo tienes todos los datos al respecto. Por favor, pasa por el original para acceder al original libre de errores.

Dice la especificación

El porcentaje se calcula sobre la altura generada de la caja contenedora. Si la altura del bloque de contención no se especifica explícitamente (por ejemplo, depende de la altura de su contenido) y el elemento no está posicionado de forma absoluta, el valor computado es auto.

Entiendo que "la caja contenedora" es el elemento padre. En el supuesto, este padre no tiene un height explícito. Pero sí tiene un min-height. Así que su altura sólo depende en parte de su contenido.

y ¿qué hay sobre el min-height?. Sobre ella dice la especificación cuando se usan unidades de longitud:

Especifica una altura (min o máx) computada fija.

Parece que esto debería ser tenido en cuenta para el cálculo de la altura de los hijos. Pero los navegadores no lo hacen. Por lo que al parecer no estoy leyendo la especificación correcta.

Lo que los navegadores hacen

Todos los navegadores que he testado ignoran height: 100% en el elemento hijo y su altura es la altura de su contenido. Aunque no es lo que yo quería, por lo menos es cross-browser.

Mientras jugueteaba con este problema di al elemento principal una altura de 1 píxel. Y ahora las cosas se ponen interesantes con diferencias entre los navegadores.

Esto probablemente sería más fácil de entender si todos los navegadores se comportaban de la misma manera. Pero no lo hacen.

Los siguientes navegadores no fijan la altura del elemento secundario (especificado en porcentaje) en función de la altura calculada de su padre, si sólo se utiliza min-height:

  • Safari 6.0.5
  • Safari en iOS 6.1
  • Opera 12.15
  • IE 8

Pero estos navegadores ampliarán la altura porcentual del hijo al min-height de su padre si el padre también tiene una altura especificada, incluso si es sólo un píxel:

  • Firefox 21
  • WebKit Nightly (verified with r151959)
  • Chrome 27
  • IE 7, 9, 10

Echa un vistazo a la altura en % cuando el padre tiene min-height y no height en esta página de demostración para ver la diferencia.

Una vez que Webkit se actualice y Opera cambie a Webkit me imagino que todos los navegadores se comportan como el segundo grupo, ya que la última "nightly build" de Webkit lo hace.

Otra cosa interesante que sucede cuando el elemento padre tiene en la altura y min-height especificada la misma unidad: si su contenido hace al elemento más alto que su min-height, el contenido se desborda como si el min-height se conviertiera mágicamente en height. La altura computada del hijo se mantendrá en el valor del min-height especificada del padre. Por lo que se puedo decir que todos los navegadores se comportan igual en este sentido, por lo que lamentablemente no se puede simplemente añadir min-height: 1px al elemento padre y resolver el problema.

Lo que los desarrolladores esperan

En cuanto a mi, intuitívamente esperaba que el valor usado para calcular la altura en % del hijo fuese la altura computada del padre.Si el padre no tiene una altura explícita pero sí una mínima ese valor se debería utilizar para la altura calculada {dependiendo del modelo de caja (box-sizing) utilizado, los rellenos y bordes también pueden ser relevantes}.

No hay solución o truco mágico que ofrecer, sólo una observación del comportamiento del navegador que no me esperaba.

Créditos y autoría del artículo

456 Berea St

Lo que acabas de leer es una "traslación" al español (con errores y disculpas por mis carencias) del artículo original: Height in percent when parent has min-height and no height de @ Roger Johansson
Sitio original de publicación: 456 Berea St.
Si lo ves en mi blog es por la autorización otorgada por su autor:
YO: I want to translate one of your articles and publish it on my site. Is that ok?
AUTOR: Yes, absolutely, provided that you clearly state that it is a translation of one of my articles and link back to the original article, and that you don’t publish it on a spammy or off-topic site.