¡Aaaaabajo!

6/nov/2006 14

Los pies de página, o footers como prefiero llamarlos, han demostrado ser un importante factor gráfico a la hora de armar sitios web, o más comúnmente, blogs. Puedes dejar estampado los derechos reservados de tu sitio, si valida, si no valida, una firma, una forma, algo importante y que debería siempre estar presente, después de todo el contenido. Existen varias formas de construirlo, aquí demuestro una bastante ingeniosa que no deja de ser interesante tener en cuenta. El código completo podrán digerirlo en la página misma de ejemplo, pero quiero hacer hincapié en 2 elementos importantes y que marcan la diferenciación de esta técnica:

/* hacks varios, adivinen para q browser… */
html, body, #contenedor {
     min-height: 100%; /* alto minimo FF y Safari */
     width: 100%;
     height: 100%; /* alto minimo para IE Windows */
     margin: 0;
     padding: 0;
}
html>body #contenedor {
     height: auto; /* con este hack escondemos el min-height de IE*/
}
/* fin hacks varios */

Estos hacks fueron necesarios a la hora de que IE6 hiciera caso al alto de la ventana total del browser, dado que no soporta la propiedad min-height. Es un pequeño truco que resulta para suplir esta falencia. Se supone que estará solucionado en IE7.

#footer {
     position: absolute;
     bottom: 0;
     width: 80%;
     margin-left: 10%;
     font-size: 11px;
     font-weight: bolder;
     color: #C00;
     text-align: center;
}

Esta es la otra parte crucial del código. Aquí, se le dice al div footer que se quede pegado al borde inferior del browser (bottom: 0;), posicionado absolutamente. El resto, mera estética.

Ver ejemplo

Pueden escalar la ventana de su browser para comprobar que realmente el footer permanece por debajo de todo el contenido.

Probado en IE6, Safari, Firefox, Opera.

Comentarios

  1. Xavi Ivars [#]

    Muy bueno!

  2. burrosh [#]

    Brujeriaaaaa!!! este blogger hace brujeria

  3. Jaime Ayala C [#]

    increíble, nunca lo había pensado de esa forma, gracias por el “tip” y el fundamento teórico.

  4. peterwhite [#]

    Que pena no tener tanto tiempo como para poner en práctica tus sabios post….una pena!

    Saludos

  5. Sobre los pies de página « Cosas sencillas [#]

    […] Ver el resto del artículo en CSSLab. […]

  6. Marcelo [#]

    ¿Donde puedo encontrar las especificaciones de CSS para usar con Firefox y Safari? porque no encuentro gran cosa en la web.
    Saludos

  7. CSSLab Admin [#]

    marcelo, a q te refieres? porq safari y FF son de los mejores en renderizar css, asi q si tu codigo esta bien hecho no tendrias problemas con esos.

    IE es el q necesita hacks y versionees propias. salu2

  8. Pedro Rogério [#]

    Thanks hermano!!!!

  9. HiDAl [#]

    Excelente este sitio. Me ha servido bastante en detalles que siempre olvido.
    Te tengo una pregunta eso si.
    Logro hacer que mi footer kede posicionado abajo, excelente, ningun problema hasta ahi, el problema radica en que cuando keda abajo el div que contiene la informacion (#principal en tu caso), no crece hasta llegar al footer. no es un gran problema en tu ejemplo, ya que tiene el mismo colo de fondo que el body o #contenedor. En cambio en el mio, mi #principal (no se llama asi, pero para el caso sirve), tiene un color distinto que al del body, y cuando tiene un texto pequeño, no alcanza a cubrir hasta el footer y se ve horrible, ya que queda un espacio de fondo mostrandose. ojala pudieses ayudarme, ya que llevo dos dias probando con casi todo de CSS y nada, inventado casi la rueda y no lo logro.

    Saludos

    =]+[=

  10. CSSLab Admin [#]

    HiDAl, chekea el ultimo articulo 100% alto, finalmente para todos

  11. Javier [#]

    Hola, se que el post es viejo y quizas no encuentre respuesta pero queria saber como hacer esto mismo cuando el contenido es dinamico. Tengo un projecto en el cual algunas páginas, como la home y contacto son estaticas, pero otras páginas tienen mas contenido y el footer permanece en la misma posicion siempre, cuando lo ideal seria que se adapte dinamicamente al alto de las distintas páginas. Muchas gracias de ante mano y felicitaciones por el sitio, es excelente!. Saludos!

  12. Jorge Epuñan [#]

    Hola Javier, si que es viejo este articulo ni lo recordaba.

    No creo entender del todo lo q pides, te refieres a que el alto de la pagina es dinamica? que el contenido es variable?

    Dónde piensas poner la barra, abajo de todo el contneido, o fijo en la ventana del navegador como lo tiene Facebook?

  13. Carolina Llanos [#]

    he buscado varias opciones y las he probado todas… funcionan… pero tengo un detalle específico…
    en tablets o celulares cuando es larga la página el footer queda a la mitad… no hay caso que baje… q onda?
    no necesito hacer una versión para móbiles, es ese puro detalle.
    Ojala puedas ayudarme

  14. Jorge Epuñan [#]

    Carolina: cuales son los tablets o celulares q estas probando? Depende mucho de su soporte para las propiedades q se usan en este ejemplo, incluso depende del OS de ellos.

    Por ej. iPhone solo desde OS4+ adquirio soporte para position: fixed en CSS.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab