« Documentación oficial de Prototype!
Amapedia »

El pie de página al pie de la página

Visita este artí­culo en http://www.estadobeta.com/2007/01/19/el-pie-de-pagina-al-pie-de-la-pagina/

Por Ismael en CSS, artículos, tips

Técnica para situar correctamente el pie de página con CSS.

El pie de página (o footer, como se lo conoce en inglés) es un elemento tradicional del diseño web, y sin embargo no hay métodos claros para lograr que se sitúe donde su nombre indica: al pie de la página. El problema común es que, si el contenido de la página es muy breve, el footer se eleva y queda, en el mejor de los casos, a media página.

Un método bastante usado es utilizar position:fixed y bottom:0 para forzar al footer a permanecer siempre pegado al borde inferior de la ventana, pero esto no funciona en versiones anteriores de Internet Explorer y si el contenido es extenso y supera el borde inferior de la ventana, el footer simplemente flota sobre el contenido.

Scriptaculous footer 2
En script.aculo.us, el footer flota sobre el contenido excedente gracias al uso de position:fixed y bottom:0;

Muchas veces, lo que se quiere es que el footer esté situado en el borde inferior de la ventana, si el contenido es muy breve, pero que sea empujado hacia abajo por el contenido si éste es más extenso.

La técnica siguiente logra justamente eso.

Primero, el HTML. En nuestro ejemplo, tendremos un elemento “container” que contendrá el contenido principal. A continuación, el pie de página o footer que pretendemos domar.

Code (html)
  2. <body>
  3.         <div id="container">
  4.                 <div id="content">
  5.                         Este es mi contenido principal.
  6.                 </div>
  7.         </div>
  8.         <div id="footer">
  9.                 EstadoBeta 2005-2007
  10.         </div>
  11. </body>
  12.  

La clave está en el CSS:

Code (css)
  1.  
  2. html,body {
  3.   height:100%;
  4. }
  5. #container {
  6.   min-height: 100%;
  7. }
  8. /* Hack para IE 6 */
  9. * html #container {
  10.   height:100%;
  11. }
  12. #footer {
  13.   position:relative;
  14.   height:40px;
  15.   margin-top:-40px;
  16. }
  17.  

Con el primer selector, damos una altura a los elementos principales, HTML y BODY. Al fijarles 100% les damos la altura total de la ventana del navegador, cualquiera que esta sea.

A continuación, damos un min-height de 100% al elemento contenedor, #container. Este es el 100% de la altura de los elementos superiores, es decir HTML y BODY, que a su vez tienen el 100% de la ventana. Esto significa que la altura mínima de #container siempre será la altura de la ventana. Sin importar la extensión del contenido, el elemento que lo contiene se extenderá hasta el borde inferior de la ventana. Y aquí es donde viene el corazón del truco.

Code (css)
  1.  
  2. #footer {
  3.   position:relative;
  4.   height:40px;
  5.   margin-top:-40px;
  6. }
  7.  

Sin este código, el footer se situaría simplemente abajo del #container, es decir abajo y fuera de la ventana. Lo que sucede es que, primero, le damos position:relative, que lo deja en el mismo lugar pero lo posiciona visualmente sobre el contenido en caso de reducir el tamaño de la ventana. A continuación, fijamos una altura específica al footer y le damos un margen superior negativo de la misma medida. Con esto, el footer “se sube” arriba del container en la misma medida de su altura.

Así se logra un footer que esté siempre abajo del contenido y pegado al bottom de la ventana si el contenido es muy corto.

Aquí incluyo un .zip con archivos de ejemplo y elementos extra como un menu lateral (perdonen los horribles colores!). Abran el archivo index.html en su navegador y prueben agrandando y achicando la ventana para ver el comportamiento de este truco.

Fuente: footerStickAlt: A more robust method of positioning a footer.

css, footer, tips

Este artículo fue publicado en 19/1/2007 a las 5:53 pm y está archivado bajo CSS, artículos, tips. Puedes seguir esta discusión a través de su canal RSS 2.0. También puedes enviarlo a Digg para compartirlo con más lectores. Puedes dejar un comentario, o hacer un trackback desde tu propio sitio.

27 comentarios para “El pie de página al pie de la página”

  1. GravatarjoseBedoya Dice:
    1/20/2007 at 11:12 am

    Uffff Ismael, gracias por este excelete tip, hace rato quería lograr esto. De nuevo felicitaciones, funciona perfectamente y esta muy bien explicado.

  2. GravatarRoberto R. Dice:
    1/21/2007 at 4:02 pm

    El footer de scriptaculous (que lo vi en el portafolio de alguien que no recuerdo=/) está nice, pero en IE se va al infierno (yo creo que por mera paja de hacerlo compatible).

    Lo que está nice es el hack para IE6, que claramente nunca pescó la propiedad min-hight.
    Como siempre, gracias por el tutorial.

  3. Gravataracttimen Dice:
    1/21/2007 at 7:34 pm

    Como siempre, excelente! Me he topado muchas veces con este problema, pero esta solución me vale madre weeeeey ;P.

  4. Gravatarantsae Dice:
    1/22/2007 at 7:11 pm

    gracias por la información.
    www.anthony.es

  5. GravatarCoke Dice:
    1/29/2007 at 3:22 pm

    Muy bueno.
    Sólo un comentario de usabilidad: ¿qué tan malo puede ser que el footer tipo scriptaculous quede flotando?
    Ellos lo solucionan bien con un footer transparente.
    Saludos!

  6. GravatarIsmael Dice:
    1/29/2007 at 5:34 pm

    Pues.. A mi personalmente el footer de Scriptaculous me encanta. Esta es una técnica para cuando lo de scriptaculous no sirve.

  7. GravatarMiguel Inostroza G. Dice:
    1/30/2007 at 7:23 pm

    Hola no entendi eso del footer tipo scriptaculous, q es?, se baja?

  8. GravatarIsmael Dice:
    1/30/2007 at 7:27 pm

    No. Mira la foto de este artículo. Me refiero a que, en scriptaculous (y en muchos sitios más) el footer está siempre pegado al borde inferior de la ventana, usando position:fixed y un par de hacks para IE6.
    Lo puedes ver si vas a script.aculo.us con Firefox u otro navegador decente.

  9. GravatarMiguel Inostroza G. Dice:
    1/31/2007 at 12:52 pm

    Ah ok muchas gracias Ismael

  10. Gravatarmu Dice:
    2/13/2007 at 5:49 am

    muy bueno el tutorial.
    sin embargo, le encuentro un fallo y es que si la columna del sidebar se estira, es decir, es más larga que la del content y supera la altura de la pantalla. el pie queda solapado por encima de ésta.

  11. GravatarIsmael Dice:
    2/13/2007 at 9:17 am

    Eso es sólo porque en el ejemplo las barras laterales usan position:absolute. Si usas float para posicionar las barras, el problema desaparece.
    Aquí escribí algo sobre la primera técnica; aquí sobre la segunda. Como explico en los artículos, cada una tiene sus ventajas y contratiempos.

  12. GravatarCruzmm Dice:
    2/16/2007 at 12:23 pm

    Ayuda por favor:
    Tengo un problema, con este ejemplo, corregí el footer para IE, pero me ocasiona problemas con firefox. esto es que se posiciona al lado izquierdo y todo mi content esta en el centro.
    Antes de seguir esta asesoria (hice todos los cambios que se sugiere para body y content ) sobre el pie de página, sí se centraba el footer pero cuando el contenido era poco el footer se subia.
    El código es el siguiente:
    #footer {
    position: relative;
    height: 40px;
    margin-top:-40px;
    margin-left: 0; /*Error FIREFOX, el footer se posiciona del lado izquierdo */
    margin-right: 0;
    margin-bottom: 0;
    background-color: #717F51;
    border-top: 9px solid #F7F7F6;
    width: 692px;
    padding: 5px 0;
    clear: both;
    }

  13. GravatarjoseBedoya Dice:
    2/19/2007 at 1:02 pm

    Pues de esta forma queda centrado, tanto en IE como en mozilla
    #footer {
    width: 692px;
    height: 40px;
    position: relative;
    margin: -40px auto 0px auto;
    }

  14. GravatarCruzmm Dice:
    2/19/2007 at 6:16 pm

    Muchas gracias JoseBedoya. Ya lo hice y exactamente, me corrigió el error en IE y Mozilla. Si tienes un espacio ojala me pudieras explicar ¿por qué se pone auto?

  15. GravatarjoseBedoya Dice:
    2/21/2007 at 9:56 pm

    Cruzmm, es con mucho gusto…
    el margin que puse hace eso:
    margin: arriba derecha abajo izquierda
    Siguiendo las manecillas del reloj.
    pues según lo que conozco de CSS, cuando le damos un valor de auto a una caja tanto en el lado derecho como en el izquierdo, lo que hace el navegador es interpretarlo con respecto al centro.
    No tengo una definición muy científica pero ese es mas o menos el concepto que da la w3c, que inclusive no es soportado 100% por IE6.
    Que se soluciona de esta forma:

    text-align: center;

    Espero me hayas entendido …

  16. GravatarIsmael Dice:
    2/22/2007 at 9:43 am

    Cruzmm: es como dice Jose Bedoya: el valor auto para los márgenes significa “distribuye todo el espacio disponible automáticamente”. Es decir, si tienes un elemento con un ancho (width) fijo y le pones auto de margen a cada lado, el elemento intentará distribuir el espacio sobrante en la pantalla como margen lateral y en partes iguales. El resultado práctico de esto es que el elemento estará siempre centrado en la pantalla. Esto no funciona bien en IE6-, por lo que además es necesario designar text-align:center en el body.

  17. GravatarEsteban Presa Dice:
    2/28/2007 at 8:50 pm

    Yo tengo un problema, en un principio me funcionaba muy bien con paginas con poco contenido, luego tuve que hacer una pagina con mas contenido y con el IE me superpone el footer, alguien me podria dar una manito?

  18. GravatarEsteban Presa Dice:
    2/28/2007 at 8:53 pm

    Disculpen el sitio esta aca SITIO y la pagina que me tira error en el IE es ESTA

    Espero alguna respuesta muchas gracias

  19. GravatarEsteban Presa Dice:
    3/1/2007 at 8:20 am

    Dios me estoy volviendo loco :) ya no se que hacer gente, estoy por patear el tablero como quien diría.
    Me anote en un papel los divs que tengo y hasta creo que ese es el problema, los divs con los floats pero bueno en el Firefox me anda muy bien y en el IE me sigue poniendo el footer arriba del texto, bueno espero que tenga alguna solucion y que alguno de ustedes me pueda extender una mano.
    Gracias

  20. GravatarjoseBedoya Dice:
    3/1/2007 at 9:52 am

    Pon el link para poder ver el código que estas utilizando.

  21. GravatarEsteban Presa Dice:
    3/1/2007 at 11:03 am

    Puse el link pero se esta modernado el comentario, a ver si ahora me deja http://www.mdp.utn.edu.ar/extension/virgili.html
    esa es la que me tira el conflicto en el IE

    Saludos

  22. GravatarjoseBedoya Dice:
    3/1/2007 at 12:04 pm

    Hola Esteban,
    Prueba esto:
    Crea esta clase en tu hoja de estilos:

    .borrarColumnas{
    clear: both;
    }

    y en tu código html ubica esta linea para que quede de la siguiente forma:

    Pruebalo y nos cuentas.

  23. GravatarjoseBedoya Dice:
    3/1/2007 at 12:08 pm

    Ups¡ no salio en el post anterior.

  24. GravatarjoseBedoya Dice:
    3/1/2007 at 12:10 pm

    Cierra Columna Derecha
    div class”borrarColumnas” /div

  25. GravatarIsmael Dice:
    3/1/2007 at 2:13 pm

    Esteban: lo que haces con esta técnica es “subir” el footer sobre el area de contenido. Por ejemplo si el footer tiene un height de 100px, luego le pones margin-top:-100px para lograr el truco. Eso significa que el footer se está superponiendo 100px sobre el contenido de arriba. Para remediar esto simplemente ponle un margin-bottom o padding-bottom de la misma medida al contenido.

  26. GravatarEsteban Presa Dice:
    3/1/2007 at 5:53 pm

    Buenas y gracias por la pronta respuesta

    En primer lugar le respondo a jose, el clear: both no anduvo, igual gracias. Muy buena tu pagina

    En segundo lugar, Ismael, eso anduvo muy bien, la unica modificacion es que lo puse de esta manera:

    * html #[nombreIdContenido] { padding-bottom: 120px } /* 120 medida del footer */ ya que el problema era el IE y no el Firefox asi que no queria el padding en este ultimo explorador ya que no era necesario.

    Muchas gracias por la respuesta nuevamente, muy buen blog, saludos.

  27. GravatarRolo Dice:
    7/31/2007 at 9:53 pm

    Encontre esto hace poco http://ryanfait.com/sticky-footer/

Deja un comentario

XHTML: puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>