Esta nota es para dedicada a mi futuro yo para no olvidar lo mínimo necesario a la hora de crear un layout con footer que se mantenga al final del web page. Veamos cómo hacerlo usando CSS clásico. Vamos a partir de un simple ejemplo en HTML:
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="content"></div>
</div>
<div class="footer">
<p>Footer area text goes here.</p>
</div>
</body>A partir de ese HTML podemos usar el siguiente CSS:
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -80px; /* Aquí ocurre la magia */
}
.wrapper:after {
content: "";
display: block;
height: 80px; /* Aquí también */
}
.footer {
background-color: #AAA;
height: 80px; /* Importante que la altura sea fija */
width: 100%;
}Ejemplo en CodePen.
La clave para lograr el efecto es restando a nuestro contendor el tamaño del footer. El contenedor puede ser el body o algún div.
El segundo método es usando el módulo de Flexbox Layout (Flexible Box). Siendo este medoto el mas moderno recomiendo visitar la guía A Complete Guide to Flexbox por
Chris Coyier
El CSS usando flex es el siguiente:
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
padding: 0;
margin: 0;
overflow-y: scroll;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
header {
background: #AAA;
-webkit-flex: 0 0 100px;
-ms-flex: 0 0 100px;
flex: 0 0 100px;
}
section {
background: #EEE;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
article {
background: #EEE;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
footer {
background: #888;
-webkit-flex: 0 0 100px;
-ms-flex: 0 0 100px;
flex: 0 0 100px;
}
Ejemplo en CodePen .
El atajo flex: contiene los siguientes elementos flex-grow, flex-shrink y flex-basis. Para más detalles no olvides pasar por la guía A Complete Guide to Flexbox.
Parecera mucho pero es realmente debido al uso de los prefijos de cada navegador. Te animo a que visites Flexplorer para jugar un poco con todo esto del Flexbox Layout.