Cómo mantener el footer en la parte inferior del navegador

03/08/2008 Categorías: CSS

La mayoría de los diseños actuales cuentan con un pie de página o footer, donde generalmente se suele añadir información de contacto, derechos de autor y otros datos relevantes. Por definición, el footer se muestra al final de la página, después de todo el contenido.

En muchas ocasiones el contenido de nuestra página no es suficiente como para que el footer se desplace hasta la parte inferior del navegador, dando una impresión de vacío bastante poco elegante, sobre todo si el pie de página tiene una imagen de fondo repitiéndose y no coincide con el fondo general del diseño.

A continuación vamos a describir una forma de solucionar esto. Obviamente este método no es el único, pero es el que hemos considerado más correcto.

Nuestra web para el ejemplo constará de las siguientes secciones diferenciables: cabecera, barra de navegación principal, columna izquierda, columna derecha y el famoso footer. De esta manera nuestro archivo XHTML, al cual llamaremos index.html, quedaría así:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  3.         <head>
  4.                 <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1″ />
  5.                 <title>DEIDOS Blog :: Mantener el footer en la parte inferior.</title>
  6.         </head>
  7.        
  8.         <body>
  9.                 <div id=“cabecera”></div>
  10.                 <div id=“navegacion”></div>
  11.                
  12.                 <div id=“columnaizquierda”></div>
  13.                 <div id=“columnaderecha”></div>
  14.                
  15.                 <div id=“footer”></div>
  16.         </body>
  17. </html>

Lo siguiente que haremos será añadir algo de contenido a las secciones: enlaces, títulos y algún texto de ejemplo:

  1. <body>
  2.         <div id=“cabecera”>
  3.                 <h1>Cabecera</h1>
  4.         </div>
  5.         <div id=“navegacion”>
  6.                 <h3>Navegaci&oacute;n</h3>
  7.         </div>
  8.        
  9.         <div id=“columnaizquierda”>
  10.                 <h2>Columna izquierda</h2>
  11.         </div>
  12.        
  13.         <div id=“columnaderecha”>
  14.                 <h2>Columna derecha</h2>
  15.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse dignissim accumsan mauris. In hac habitasse platea dictumst. Nulla ut massa. Nulla malesuada, pede quis sagittis mattis, tellus nunc feugiat massa, nec aliquam velit sem in lacus. Vivamus et arcu in lacus lobortis adipiscing. Nullam et diam et dolor laoreet convallis. Fusce eu erat quis lacus viverra adipiscing. Vestibulum tempus erat ullamcorper velit. Pellentesque porttitor ipsum a mi. Duis pulvinar, dolor non tempor posuere, augue enim malesuada nisi, in sodales erat lectus in erat. Donec eleifend. Sed rhoncus, metus eu pretium consequat, massa odio dapibus tellus, at suscipit orci tortor a ipsum. </p>
  16.         </div>
  17.        
  18.         <div id=“footer”>
  19.                 <h4>Footer</h4>
  20.         </div>
  21. </body>

Si abrimos la web en el navegador no veremos gran cosa, ya que todavía nos faltan por definir los estilos para las distintas capas. Para ello creamos nuestro archivo CSS, el cual llamaremos general.css.

  1. html, body {
  2.         height: 100%;
  3. }
  4.  
  5. body {
  6.         margin: 0;
  7. }
  8.  
  9. h1, h2, h3, h4 {
  10.         margin: 0;
  11. }
  12.  
  13. #cabecera {
  14.         width: 100%;
  15.         height: 125px;
  16.         background: #d9d9d9;
  17. }
  18.  
  19. #navegacion {
  20.         width: 100%;
  21.         height: 40px;
  22.         background: #a3a3a3;
  23. }
  24.  
  25. #columnaizquierda {
  26.         float: left;
  27.         width: 25%;
  28. }
  29.  
  30. #columnaderecha {
  31.         width: 70%;
  32.         margin-left: 25%;
  33.         background: #999;
  34. }
  35.  
  36. #footer {
  37.         clear: left;
  38.         width: 100%;
  39.         height: 50px;
  40.         background: #666;
  41. }

El siguiente paso es enlazar el archivo index.html con la hoja de estilos, para lo cual añadiremos la siguiente línea entre las etiquetas head. Si hemos guardado el archivo CSS en otra carpeta, deberemos indicar la ruta correspondiente en el atributo href.

  1. <link rel=“stylesheet” type=“text/css” href=“general.css” />

Como podemos ver, el footer aparece justo después del contenido de la columna derecha, en vez de en la parte inferior del navegador. Una posible solución sería colocarlo abajo del todo utilizando posicionamiento absoluto, pero si lo hacemos y el contenido supera el alto del navegador, al bajar el scroll el footer seguirá “flotando” en la misma posición.

Para solucionar esto, primero deberemos añadir dos capas extra al archivo XHTML. Una capa que contendrá todos los elementos excepto el footer, a la que llamaremos contenedor, y otra que llamaremos clearfooter. Nuestro index.html quedaría así:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  3.         <head>
  4.                 <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1″ />
  5.                 <title>DEIDOS Blog :: Mantener el footer en la parte inferior.</title>
  6.                 <link rel=“stylesheet” type=“text/css” href=“general.css” />
  7.         </head>
  8.        
  9. <body>
  10.         <div id=“contenedor”>
  11.                 <div id=“cabecera”>
  12.                         <h1>Cabecera</h1>
  13.                 </div>
  14.                 <div id=“navegacion”>
  15.                         <h3>Navegaci&oacute;n</h3>
  16.                 </div>
  17.                
  18.                 <div id=“columnaizquierda”>
  19.                         <h2>Columna izquierda</h2>
  20.                 </div>
  21.                
  22.                 <div id=“columnaderecha”>
  23.                         <h2>Columna derecha</h2>
  24.                         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse dignissim accumsan mauris. In hac habitasse platea dictumst. Nulla ut massa. Nulla malesuada, pede quis sagittis mattis, tellus nunc feugiat massa, nec aliquam velit sem in lacus. Vivamus et arcu in lacus lobortis adipiscing. Nullam et diam et dolor laoreet convallis. Fusce eu erat quis lacus viverra adipiscing. Vestibulum tempus erat ullamcorper velit. Pellentesque porttitor ipsum a mi. Duis pulvinar, dolor non tempor posuere, augue enim malesuada nisi, in sodales erat lectus in erat. Donec eleifend. Sed rhoncus, metus eu pretium consequat, massa odio dapibus tellus, at suscipit orci tortor a ipsum. </p>
  25.                 </div>
  26.                
  27.                 <div id=“clearfooter”></div>
  28.         </div>
  29.        
  30.         <div id=“footer”>
  31.                 <h4>Footer</h4>
  32.         </div>
  33. </body>
  34. </html>

A continuación definimos los estilos para las nuevas capas, además de cambiar el posicionamiento del footer a relative (por defecto viene en static).

Para que funcione correctamente en todos los navegadores, (concretamente en IE6) deberemos crear un archivo CSS exclusivo para el mismo, que llamaremos general_ie.css. La diferencia entre la hoja de estilos normal y la de Internet Explorer es que la propiedad min-height se sustituye por height. Podríamos haberlo solucionado mediante hacks, pero de esta manera no validaría, y queremos cumplir los estándares… ¿verdad?

  1. /* Footer IE */
  2. #footer {
  3.         position: relative;
  4.         clear: left;
  5.         width: 100%;
  6.         height: 50px;
  7.         background: #666;
  8. }
  9.  
  10. /* Footer resto navegadores */
  11. #footer {
  12.         position: relative;
  13.         clear: left;
  14.         width: 100%;
  15.         min-height: 50px;
  16.         background: #666;
  17. }

Finalmente, para que la nueva hoja de estilos la lean IE6 e inferiores, modificaremos la cabecera de esta manera:

  1. <head>
  2.                 <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1″ />
  3.                 <title>DEIDOS Blog :: Mantener el footer en la parte inferior.</title>
  4.                 <link rel=“stylesheet” type=“text/css” href=“general.css” />
  5.                 <!–[if lt IE 7]>
  6.                   <link rel=“stylesheet” type=“text/css” href=“general_ie.css” />
  7.                 <![endif]–>
  8. </head>

Voilà! Ya tenemos nuestro footer en la parte inferior del navegador, independientemente del contenido que tengan las capas superiores.

Etiquetas: , ,

5 comentarios

  1. lec

    01/10/2008 a las 3:15 pm

    compadre… me parece barbaro… muchas gracias… solo te falto un .rar para descargar el proyecto completo… saludos
  2. Mona Velasco

    24/02/2009 a las 1:11 am

    ¿Pero qué valores tienen los div clearfooter y contenedor?
  3. Excalibur06

    17/03/2009 a las 6:02 pm

    muchisimas gracias, excelente y super bien explicado!
  4. Mantener el footer en la parte inferior :: DEIDOS :: Diseño web en Córdoba, posicionamiento y aplicaciones web.

    14/08/2009 a las 10:10 am

    [...] 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 [...]
  5. sefo

    28/06/2010 a las 3:48 pm

    Gracias!! Me sirvió!
    Saludos.

Tu comentario