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

via Pixelovers by juanmaguitar on 8/24/10


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 pagina pegajoso) 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 Sonrisa

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…

<body> <div id="container"> <div id="header"> … </div> <div id=”content”> … </div> <div class="push"></div> </div>  <div id=”footer”> … </div>  </body>

aplicaríamos este CSS …

* { margin: 0; } html, body { height: 100%; } /* El margin-bottom de container es el valor negativo de la altura del footer */  #container { min-height: 100%; height: auto !important; height: 100%;  margin: 0 auto -4em;  } /* .push debe tener la misma altura que footer */ #footer, .push { height: 4em; clear:both; }

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

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

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: