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.
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