En esta entrada aprenderemos a crear un pie de página que siempre se mueve hacia donde nosotros estamos, es decir, que quede “pegado” a la barra de navegación.
Bastante útil para mostrar información que siempre queremos que se visualize, ya que creemos que es información importante o que el lector debería leerla.
El código CSS sería así:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* el margin del bottom debe ser el mismo valor que el alto del footer pero en negativo */
}
.footer, .push {
height: 142px; /* .push debe ser el mismo alto que .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
El código HTML:
<div class="wrapper"> <div class="header"> <h1>CSS Sticky Footer</h1> </div> <h2>El título del pie de página</h2> <p>El texto del pie de página</p> <h2>El título de pie de página</h2> <p><q>El texto de pie de página</q></p> <p></p> <div class="push"></div> </div> <div class="footer"> <p> Texto alternativo </p> </div>
Recomiendo usar el pie de página para indicar las secciones de Contacto, Información suscripción a feed y otras que informarán al lector acerca del blog.
Podemos ver un ejemplo de su funcionamiento. (Si tienes una resolución muy alta deberás redimensionar la ventana del navegador hasta que se vea la barra de scroll vertical.)
