Dejar el footer fijo con CSS
Este es un código muy útil, limpio y logra un efecto muy estético crado por Ryan Fait.
Consiste en dejar una <div> siempre visible adherida al borde bajo del navegador y que al hacer scroll no cambia su posición, con esto puedes aumentar la usabilidad del sitio entregando herramientas que estén siempre accesibles, es importante no llenar la barra fija con contenido poco útil.
CSS:
-
* {
-
margin: 0;
-
}
-
html, body {
-
height: 100%;
-
}
-
.wrapper {
-
min-height: 100%;
-
height: auto !important;
-
height: 100%;
-
margin: 0 auto -4em;
-
}
-
.footer, .push {
-
height: 4em;
-
}
Una consideración para que funcione es que todo tu contenido debes dejarlo dentro de la etiqueta .wrapper como se muestra en este demo, así es como debe conformarse tu codigo.
HTML:
Leave a Reply