Juan Manuel Viernes, 16 de Mayo de 2008 a las 13.52
   Imprimir artículo
elWebmaster.com

CSS Sticky Footer: un footer fijo con estilos CSS

Diseño, CSS, recursos, código, footer

CSS Sticky Footer: un footer fijo con estilos CSSEs un efecto muy bueno y no hay muchos sitios que lo implementen. El uso de un footer fijo tiene muchas utilidades además de ser algo muy bonito ^_^. Piensen que tendrán una cantidad de opciones, enlaces y demás todo el tiempo al alcance del usuario.

CSS Sticky Footer es un script de CSS listo para que copies y pegues en tu proyecto web. La mayor ventaja es que funciona con Internet Explorer 5, 6, 7 y 8, además de Firefox, Opera y Safari, entre otros.

CSS Sticky Footer: un footer fijo con estilos CSS

Agrega las siguientes líneas de código CSS a tu hoja de estilos. El valor negativo para el margen en .wrapper es el mismo número que el alto de .footer y .push. El margen negativo siempre debería ser igual que la altura total del footer (incluyendo paddings o bordes que hayas o no agregado).

   1.  * {
   2.     margin: 0;
   3. }
   4. html, body {
   5.     height: 100%;
   6. }
   7. .wrapper {
   8.     min-height: 100%;
   9.     height: auto !important;
  10.     height: 100%;
  11.     margin: 0 auto -4em;
  12. }
  13. .footer, .push {
  14.     height: 4em;
  15. }

En tu HTML, sigue la siguiente estructura. Nada del contenido puede estar fuera de .wrapper ni de .footer salvo que ya esté posicionado por medio de CSS:

   1.  <html>
   2.     <head>
   3.         <link rel="stylesheet" href="layout.css" ... />
   4.     </head>
   5.     <body>
   6.         <div class="wrapper">
   7.             <p>Your website content here.</p>
   8.             <div class="push"></div>
   9.         </div>
  10.         <div class="footer">
  11.             <p>Copyright (c) 2008</p>
  12.         </div>
  13.     </body>
  14. </html>

¿Tienes problemas?

  • Agregar márgenes a los elementos puede ser un lío. Usa padding en su lugar y se solucionarán todos tus problemas.
  • Si no te funciona con “x” navegador, chequea que esté soportado y si has copiado bien el código.

Las propiedades height: auto !important; y height: 100%;

Ya sé que anda perfecto sin ellas. Son simplemente un pequeño hack para que el footer funcione en Internet Explorer 6, así que ¡No las elimines!

Haz clic aquí para ver un ejemplo de cómo queda este efecto.

Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Comentarios (3)

  1. Juanu dice:
    Viernes, 16 de Mayo de 2008 a las 18.53

    Uyyy muy bueno! capaz le dé algún tipo de uso alguna vez :)
    buenisimo, gracias!

  2. colombia dice:
    Sábado, 14 de Junio de 2008 a las 15.50

    NORMALmente buscamos estilos seguros , estos son uno de ellos
    faciles de implementar
    gracias

  3. Leandro Javier Aude dice:
    Lunes, 16 de Junio de 2008 a las 15.14

    Hay que agradecer y felicitar a Ryan Fait por permitirnos usar sus modelos prediseñados.Ojala todos fuesen asi con sus esposas

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar Sesión