Mantener footer en la parte inferior (Nuevo Método)

14/08/2009 Categorías: Diseño

Ante los problemas que presentaba el método presentado anteriormente para mantener el footer en la parte inferior de la página VER, os presentamos otra variante que sí que funciona perfectamente en todos los navegadores.


Supongamos que tenemos:

  1. <div id=“contenedor”>
  2.       <div id=“cabecera”>
  3.       </div>
  4.       <div id=“contenido”>
  5.       </div>
  6. </div>
  7. <div id=“footer”>
  8. </div>

Añadimos una nueva capa “push” antes del footer:

  1. <div id=“contenedor”>
  2.       <div id=“cabecera”>
  3.       </div>
  4.       <div id=“contenido”>
  5.       </div>
  6. </div>
  7. <div id=“push”>
  8. </div>
  9. <div id=“footer”>
  10. </div>

En cuanto al css, aquí teneis las propiedades que intervienen en el proceso que andamos buscando:

  1. html,body{
  2. height:100%;
  3. }
  4. #contenedor{
  5. display:table;
  6. width:999px;
  7. min-height: 100%;
  8. height: auto !important;
  9. height: 100%;
  10. margin: auto;
  11. position:relative;
  12. }
  13.  
  14. #push{
  15. height:29px;
  16. }
  17.  
  18. #footer{
  19. width:100%;
  20. margin:auto;
  21. position:absolute;
  22. bottom:0;
  23. height:29px;
  24. }

Como podéis ver, la altura de la capa push tiene que coincidir con la altura del footer.

Espero que os sirva.

Etiquetas: , , ,

1 comentario

  1. Francisco

    27/09/2009 a las 12:00 am

    Gracias esta muy bien, funciona perfectamente, solo una cosa, en mi pagina tengo un div para mostrar un borde a los lados hasta el footer, el problema es que ahora el footer esta abajo pero la pagina se queda hasta la mitad, osea si se ve toda la pagina pero los bordes no llegan hasta el footer solo hasta donde termina el contenido, entonces se la ve partida, ¿como podria arreglar eso?

    Saludos

Tu comentario