Pie de página fijo con CSS
Voy a detallar como hay que hacer para lograr crear un pie de página (footer) completamente fijo y adherido al fondo de la página web sin importar cuan larga sea. Lo primero que tenemos que hacer, es crear o abrir una web existente y agregar dos campos divs:
<div id="footer"> <p>Contenido del footer</p>; </div>
Para ejemplificar, vamos a utilizar el siguiente código CSS que no necesitas agregar a tu sitio
* { padding: 0; margin: 0; } body { font-family: "lucida sans", verdana, arial, helvetica, sans-serif; font-size: 75%; } h1 { font-size: 1.4em; padding: 10px 10px 0; } p { padding: 0 10px 1em; } html, body { height: 100%; } #container { min-height: 100%; background-color: #DDD; border-left: 2px solid #666; border-right: 2px solid #666; width: 676px; margin: 0 auto; } * html #container { height: 100%; }
Y esto si es lo importante, el CSS para el footer y el clearfooter
#footer { width: 680px; background-color: #000; color: #DDD; text-align: center; height: 40px; padding-top: 10px; margin: -50px auto 0 auto; } #clearfooter { height: 50px; }
Podes personalizar el footer modificando el CSS a tu gusto, ya sea el tamaño (width), el color de fondo, y todo lo demás…
Una Respuesta to “Pie de página fijo con CSS”
Por Fran el Feb 10, 2008 | Responder
Gracias por la explicación. Lo probaré
Saludos