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


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

Comentarios (12)

  1. Juanu dice:

    Uyyy muy bueno! capaz le d√© alg√ļn tipo de uso alguna vez :)
    buenisimo, gracias!

  2. colombia dice:

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

  3. Leandro Javier Aude dice:

    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:

    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:

    ese width de 850px se lo doy en el wrapper

  6. Juan Manuel dice:

    ¬ŅHaz probado copiando el c√≥digo de ejemplo del enlace? Tal vez ayude…

  7. jonathan dice:

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

  8. jonathan dice:

    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:

    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:

    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;

  11. Alberto dice:

    Me gustaría implementar esto en un sitio desarrollado con worpress.
    Pregunto: los codigos HTML ¬Ņdebo colocarlos en el index.php del theme wordpress?
    Lo que yo quiero mostrar en el footer es animaciones flash ¬Ņdebo embeberlas en el rengl√≥n 7? agradesco de antemano

  12. Aracely dice:

    disculpen mi ignorancia, esto es lo que necesito pero los c√≥digos los coloco en cada apartado diferente o todo seguido,no entiendo =(….

Deja tu opinión

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