Dejar el footer fijo con CSS

Publicada el 18.Mayo.2008 por Diego Ignacio en CSS, Codigo, Diseño, Tips

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:

<html>
<head>
<link rel="stylesheet" href="layout.css" type="text/css">
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
</html>

Tags: Codigo, CSS, HTML, Tips

Puedes comentar sobre esta entrada, o hacer un TrackBack desde tu sitio.

Dejar el footer fijo con CSS

Deja tu comentario