
Height 100% métodos alternativos con CSS3
Hola a todos y bienvenidos a un nuevo post de la Escola Espai. Hoy hablaremos de un tema que a todos los maquetadores nos trae de cabeza. El height 100%. ¿Cómo podemos especificar un height 100% de un elemento, con respecto a la altura máxima de la pantalla del navegador o con respecto a su contenedor padre?
Cuando empezamos a escribir css aprendemos una regla de oro: nunca vamos a determinar la altura de nuestros elementos, ya que esta altura vendrá determinada por el contenido. Pero, ¿y si el contenido es demasiado corto y queremos que nuestra caja ocupe un height 100%? Habréis notado que ahora está muy de moda utilizar un slider full-screen que presente nuestra página web de forma impactante y vistosa. También, por ejemplo, se están viendo cada vez más los menús laterales que ocupan todo el alto de nuestra web.
¿Cómo podemos hacer esto? Y lo que es peor: ¿Cómo hago que sea totalmente responsive? Uno podría pensar: «fácil, ponemos un height 100%, tal como hacemos con el width y listo». Es una solución, siempre y cuando la altura del elemento padre se haya especificado. Si no conocemos la altura del contenedor o ésta viene determinada por su contenido, el valor porcentual del height no funcionará.
Dos métodos alternativos para lograr un height 100%.
Estableciendo alturas completas para elementos absolutos e introduciendo la medida vh.
El primer método sería aplicar una posición absoluta a nuestro elemento y jugar con los valores de top y bottom. Si a un elemento en posición absoluta le damos al mismo tiempo un valor de 0 tanto para top como para bottom, el elemento se estirará para cumplir con los dos valores que le estamos dando (podemos hacer lo mismo con las propiedades right y left). En otras palabras, le estamos pidiendo a un elemento que esté tanto en la posición 0 de arriba como en la de abajo, la única manera que tiene de hacernos caso es ocupando la altura total del elemento al cual es relativo.
Un ejemplo de este código sería el siguiente:
.fullHeight { position: absolute; top: 0; bottom: 0; }
El segundo método es utilizando la unidad vh. Seguramente ya sabréis que para determinar el «tamaño» de un elemento en css podemos utilizar unidades como los píxeles, puntos, porcentajes o incluso em. Pero quizá no hayáis oído hablar de las unidades vh y vw. Una unidad vh (viewport height) equivale a un 1% de la altura del viewport (el total de la pantalla del dispositivo que muestre nuestra web). 1vh = 1% del total de la pantalla, 100vh = 100%. Como os habréis imaginado, la unidad vw es el equivalente para el ancho.
Usando estas unidades podemos determinar una altura fullheight de la siguiente manera:
.fullHeight { height: 100vh; }
El problema de este método es su compatibilidad con los navegadores. Actualmente las medidas en vh y vw funcionan en: ie9+, Chrome 34+, Firefox 19+, Safari 7+, Android 4.4+ y iOS 6+. Debemos ser conscientes además de que pueden causar problemas tanto en Safari y Chrome de iOS 6 y 7.
Como veis es muy sencillo, ambos métodos funcionan sin necesidad de declarar la altura del contenedor padre y son totalmente responsive.
¡Espero que os haya sido de utilidad!
Sajir
Por los dioses dele olimpo! y por la barba de odin! que descubrimiento!
jeison
buenísimo aporte… ni me lo imaginé
Adrian
Gracias por el aporte. La compatibilidad creo que no es problema hoy en día. IE9 o anteriores no creo que nadie lo use, Chrome ya está en la versión 83, Firefox 85, Safari 14, iOS 14, Android 11
CoudLain
mi madre vaya descubrimiento la unidad VH, espectacular. Grandisimo articulo muchas gracias! os hago repost! xDD
Paco Luque
Hola, me alegra que te haya gustado y sobretodo nos alegra que los artículos que publicamos en la escuela Espai te hayan sido útiles. Gracias por el Repost.
Fernando S. Saucedo
excelente, muy amable!
Paco Luque
Hola Fernando, me alegra que te haya sigo úlil el artículo, Gracias y un saludo desde la Escuela Espai de Barcelona.
Dexter
Muchas gracias!
Paco Luque
Hola Dexter, me alegra que te haya gustado. Que tengas un feliz día!
Roberth
Genial amigo, salvaste mi cuarentena…
Paco Luque
Hola Roberth, , me alegra que te haya gustado y sobretodo nos alegra que los artículos que publicamos en la escuela Espai te hayan sido útiles. Feliz día!
Fernando
Gracias bro!! Me ayudo muchisimo
Roger
me salvaste la vida…