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!