Juan Manuel 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 (10)

  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

  4. jonathan dice:
    Lunes, 8 de Septiembre de 2008 a las 22.56

    No me funciona. me podrías ayudar??? mira copio el código y todo bien solo que cuando le doy un width:850px; en ie7 pasa algo que me fastidia deja un pequeño margen en la parte inferior.

    se ve flotando el footer, y en fire fox si anda bien a que se debera????
    creen conveniente que peque el código??

    lo mas curioso es que si le dejo el width de 700px si se queda el footer pegado

  5. jonathan dice:
    Lunes, 8 de Septiembre de 2008 a las 22.59

    ese width de 850px se lo doy en el wrapper

  6. Juan Manuel dice:
    Martes, 9 de Septiembre de 2008 a las 10.28

    ¿Haz probado copiando el código de ejemplo del enlace? Tal vez ayude…

  7. jonathan dice:
    Martes, 9 de Septiembre de 2008 a las 19.16

    Alguien que me ayude??
    le mando el código por correo??

  8. jonathan dice:
    Martes, 9 de Septiembre de 2008 a las 19.18

    Por que no puedo pegar el código a qui no me deja. si probé copiando el código del enlace y me hace lo mismo me estoy desesperando..

  9. jonathan dice:
    Martes, 9 de Septiembre de 2008 a las 19.30

    jajajajaja en mi desesperación por el footer flotante presione f5 sin querer y se re acomodo y se pego.
    y es que cada vez que cambiaba el tamaño y ejecutaba la pagina flotaba el footer, pero se soluciona con un refresh.

    espero en lo mas profundo que este post le sirva a alguien que se aya asustado como yo. pero ese maldito navegador de ie siempre sacando canas….

  10. Sirio dice:
    Viernes, 26 de Junio de 2009 a las 22.50

    Solucionen este problema:
    Valor incompatible: ‘fixed’
    Afecta: Internet Explorer 7.0, 8.0b1; Internet Explorer for Macintosh 5.2:

    @media screen{
    body>div#footer{
    position: fixed;

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