Al desarrollar diseños web, en algún momento probablemente te hayas encontrado con este problema:
Este diseño obviamente roto ocurre cuando un pie de página se coloca estáticamente al final del cuerpo, pero la página no tiene mucho contenido. No hay nada que empuje el pie de página lo suficiente y permanece en el medio de la pantalla, dejando una gran área de espacio en blanco debajo.
En este tutorial rápido, vamos a echar un vistazo a una técnica moderna para crear pies de página que garanticen que se mantendrán en la parte inferior de la página en todo momento.
La técnica
Para evitar que suceda lo anterior, construiremos nuestra página usando flexbox, la herramienta más avanzada que CSS3 tiene para ofrecer para crear diseños adaptables. Para aquellos que no estén familiarizados con el modelo flexbox y sus propiedades, dejaremos un par de enlaces al final del artículo.
Nuestra sencilla página de demostración tendrá un encabezado, una sección principal y un pie de página. Aquí está el HTML, nada extraordinario allí.
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
Para habilitar el modelo flexible agregamos display: flex al cuerpo y cambie la dirección a columna (el valor predeterminado es fila, que es un diseño horizontal). Además, el html y body necesitará 100% de altura para llenar toda la pantalla.
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
Ahora necesitamos ajustar cuánto espacio ocupará cada sección. Hemos hecho esto a través del flex property, que agrupa tres especificaciones flexibles en una sola:
- flex-grow - Define cuánto del espacio libre disponible en el contenedor va a un elemento.
- flex-shrink:cuánto se encogerá un elemento cuando no haya suficiente espacio para todo.
- flex-basis:el tamaño predeterminado de un elemento.
Queremos que nuestro encabezado y pie de página ocupen todo el espacio que necesitan, y que todo lo demás se reserve para la sección de contenido principal. El CSS para dicho diseño se ve 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;
} Para ver esta técnica en acción, consulte nuestra página de demostración haciendo clic en la imagen a continuación. Con el botón rosa grande, puede cambiar la cantidad de contenido para ayudarlo a observar cómo se adapta el diseño y empuja el pie de página hacia abajo en todo momento.
Conclusión
Como puede ver, flexbox es un poderoso aliado cuando se construyen diseños desde cero. Todos los navegadores principales lo admiten, con algunas excepciones menores, por lo que es bastante seguro usarlo en todos los proyectos IE9+. ¿Puedo usar flexbox?
Aquí hay algunas lecciones increíbles y trucos para aprender más sobre el modelo de diseño de flexbox:
- Una guía rápida de flexbox por CSS-Tricks - aquí.
- Resuelto por Flexbox, un sitio web dedicado a técnicas geniales de flexbox - aquí.
- Lección interactiva de 5 minutos - aquí.
Esperamos que le haya gustado nuestra forma de crear pies de página adhesivos y que haya aprendido algo nuevo y útil del artículo. ¡Déjanos un comentario si tienes tu propio truco genial de flexbox!