en CSS

Sticky Footer: Como mantener el Footer en la parte inferior del navegador

En la maquetación de nuestros sitios web nos encontramos muchas veces con que tenemos que solucionar un pequeño problema: necesitamos mantener el footer pegado al pie de la pagina sea como sea el contenido de esta.

Este tipo de problema con el Footer tambien lo puedes encontrar por la red con el nombre de  “Sticky Footer “ (Pie de paginavpegajoso) y aunque hay varias soluciones por la red,  yo voy a compartir aquí una que me funciona muy bien. Y si algo te funciona, ¿para que cambiar? ¿No?

Asi que, resumiendo… ¿cómo se va a comportar nuestro Footer cuando apliquemos esta tecnica?

  • Que hay mucho contenido… pues la pagina hará su Scroll (como mandan los canones) y debajo de todo tendremos a nuestro Footer
  • Que hay poco contenido… pues veremos toda nuestra pagina sin Scroll y ahí debajo bien situado, pegadito al borde de abajo, veremos a nuestro Footer saludando :-)

Esta técnica nos viene de la mano de Ryan Fait  y lo unico que hay que hacer es añadir un DIV de mas.

Es decir para una estructura HTML como esta…

aplicaríamos este CSS …

Puedes ver un ejemplo de esta tecnica de la mano del propio autor.

¿Y tu? ¿Conoces alguna otra técnica “definitiva” para solucionar este problema?

Esperamos vuestros comentarios

Posts Relacionados

Limpieza de floats en Internet Explorer 7 Durante los últimos meses, Microsoft nos ha tenido en vilo ( sobretodo a los desarrolladores web ), pendientes del soporte a la especificación de CS...
CSSEdit y las hojas de estilo bien organizadas  Releía esta mañana CSS Crib Sheet , un artículo de Dave Shea que podéis encontrar traducido al castellano gracias a la gente de Armonía y pensa...
Hojas de estilo para impresión Hoy vamos a hablar sobre cómo, mediante hojas de estilo, podemos optimizar nuestras páginas para ser impresas. Aún a dia de hoy es habitual enco...
  • http://neiker.com.ar neiker

    Yo cambio la propiedad “position” (entre realtive y fixed) usando jQuery… Es la forma mas comoda que encontré.. ya que muchas veces el height del footer no se puede tocar 😛
    Asi:

  • juanmaguitar

    @neiker, desde luego, si no puedes poner por CSS la altura del footer, una solución como la que comentas por JS & jQuery seria la adecuada.

    Pero ya dependes de tener cargada la libreria jQuery y de que esté el JS activado. Aunque… hoy en dia, en la mayoria de los desarrollos webs vas a necesitar ambas cosas, asi que esto ya va dejando de ser un problema :-)

    Gracias por la aportacion!

  • http://duyal.es/ Diseño Web Cádiz

    Excelente la información que nos muestras en tu blog, ayuda a obtener más conocimientos sobre este tema.

  • Vladimir

    Muchas gracias antes lo hacía con javascript

  • Raven

    Este código es conciso!
    Muchas gracias por compartirlo, como es compatible con todos los exploradores lo uso de planilla 😀

  • http://www.pymsolutions.com PruebaRana

    Yo tengo una solucion parecida, sin necesidad de meter la cabecera dentro del contenido.

    A ver que os parece.

    http://jsfiddle.net/7tHTR/

    PD: Acepto comentarios, y criticas constructivas, si lo que hago es inadecuado, me interesa estar informado de ello.

    Gracias.