La mejor manera de hacer un footer fijo

A la hora de hacer el diseño de una web, en cierto punto es posible que te hayas topado con esto:

Este error de diseño se debe a que el footer está posicionado estáticamente al final del body, pero la página no tiene mucho contenido. No existe nada que empuje el footer lo suficiente y por ello, se queda en el centro de la pantalla, dejando una enorme zona en blanco debajo de él.

En este sencillo tutorial vamos a echar un vistazo a una moderna técnica para desarrollar footers que se queden pegados en la parte inferior de la página web en todo momento. ¿Estás preparado? Pues vamos a ello.

La técnica

Para evitar el problema mostrado anteriormente vamos a desarrollar nuestra página utilizando Flexbox, una herramienta CSS3 muy avanzada que te permite crear diseños responsive de una manera sencilla. A aquellas personas que lo de Flexbox le suene a cuento chino, decirles que próximamente traeremos unos tutoriales para desenvolverse bien con la herramienta.

Nuestra sencilla página de ejemplo contará con un encabezado, una sección principal y un pie de página. Aquí está el código HTML, como puedes ver, no hay nada extraordinario.

<body>
    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>
</body>

Para habilitar el modelo flex añadimos display:flex en el cuerpo, y cambiamos la dirección a column (por defecto es row, que es el layout horizontal). También, necesitamos que el html y el body tengan un alto del 100% para rellenar toda la pantalla.

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

Ahora necesitamos ajustar la cantidad de espacio que ocupará cada sección. Lo haremos a través de la propiedad flex, que agrupa las tres características flex en una sola:

  • flex-grow: Define cuanto espacio libre disponible en el contenedor irá destinado a un elemento.
  • flex-shrink: Cuanto se reducirá un elemento cuando no hay suficiente espacio para todo
  • flex-basis: El tamaño por defecto de un elemento

Lo que queremos es que tanto el header como el footer ocupen todo el espacio que necesiten, mientras que el espacio sobrante vaya a parar a la sección principal. El CSS para ese diseño sería una cosa así:

header{
   /* We want the header to have a static height, 
   it will always take up just as much space as it needs.  */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

.main-content{
   /* By setting flex-grow to 1, the main content will take up 
   all of the remaining space on the page. 
   The other elements have flex-grow: 0 and won't contest the free space. */
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}

footer{
   /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

Como puedes ver, Flexbox es un poderoso aliado en la creación de diseños desde cero. Todos los navegadores populares lo soportan, con algunas excepciones menores, por lo que es más o menos seguro que puedas utilizarlo en todos los proyectos de IE9+. Esperamos que te haya gustado nuestra forma de crear pies de página fijos y que ha aprendido algo nuevo y útil del artículo.

Fuente: tutorialzine.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.