El siguiente tutorial será la aplicación de un footer o pie de página siempre al fondo de la pantalla de nuestro navegador, esto sin requerir el uso de posiciones absolutas y con la ventaja que se adaptara para a cualquier resolución de pantalla.

Así que algunos de los conocimientos que necesitas son:

  • Conocimiento básico o intermedio de cómo funcionan las capas en CSS.
  • Conocimiento básico de HTML.
  • Como siempre voy trabajando con HTML5, te recomiendo que visites Introducción a HTML5 por si tienes dudas de las nuevas etiquetas.

Problemática

Muchas veces nos sucede que ciertos sitios web tienen tan poco contenido que el pie de página pareciera como si quedara colgando del contenido, y se ve un enorme espacio abajo del footer como se muestra en la siguiente imagen:

ejemplo footer screenshot

Ejemplo de footer sin fix

Si te das cuenta, el espacio debajo del pie de página que llamamos en este caso “espacio muerto”, es aquel espacio que sobra, debido a que el contenido es muy poco y la pantalla tiene una resolución superior.

Probablemente si posees una pantalla con una resolución baja, supongamos 1024×768, puede que el alto calce perfecto. Pero en los casos que la resolución es mayor como por ejemplo 1680×1050, se verá un enorme espacio en blanco.

Solución propuesta

He visto que muchas personas utilizan el pie de página con una posición absoluta y siempre se mantendrá abajo independiente de la resolución. Bueno el problema de esto, es que mientras la pantalla sea más pequeña, mayor es la posibilidad de que el footer quede encima del contenido.

La solución ideal, es que el footer se mantenga siempre en el fondo de la página, pero que este a su vez no se superponga a los contenidos superiores. En pocas palabras, que automáticamente se ponga abajo del contenido o quede en el fondo del sitio.

Aplicación

El HTML será el siguiente:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pie de pagina dinamico solo con CSS</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
    <div id="wrapper">
    	<section class="content">
        	<h1>Titulo del contenido</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet eros. Fusce aliquet rutrum metus sed mollis. Phasellus sollicitudin ultrices dui ac auctor. Ut iaculis laoreet nulla, quis pharetra nisl lacinia id. Pellentesque tempor consectetur odio vel vulputate. Maecenas nec tellus lorem, ut blandit massa.</p>
            <p>Vivamus ac eros arcu, in porta massa. Donec ut odio est, at auctor lacus. Nam interdum, nisi a egestas dapibus, magna libero tristique felis, quis rutrum tellus mi quis purus. Mauris rhoncus, velit ut aliquam scelerisque, quam sem placerat justo, congue blandit ante odio a diam. In volutpat nibh in nibh laoreet imperdiet. Morbi commodo interdum pellentesque.</p>
        </section>
    </div>
    <footer id="footer"></footer>
</body>
</html>

Primero tenemos una envoltura wrapper, que será la encargada de envolver todo el contenido principal y realizar el fix.

Nota importante: el footer siempre tendrá que ir fuera del #wrapper para que pueda ser utilizado correctamente.

El CSS sera el siguiente:

/* Reset */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

html{ overflow: auto; }
html, body{ height: 100%; }
body{ font: 14px Arial, Helvetica, sans-serif; color: #333; }
h1, p{ padding-bottom: 20px; }
a{ text-decoration: none; }

/* End Reset */

/* Content */

#wrapper{ width: 500px; margin: 0 auto; overflow: hidden; height: auto; min-height: 100%; }
section.content{
	background-color: #f5f5f5;
	border: 1px solid #eee;
	padding: 20px;
	border-radius: 20px;
	margin: 50px 0 102px 0;
}
section.content h1{ font-size: 18px; font-weight: bold; text-align: center; }

/* End Content */

/* Footer */

#footer{
	margin-top: -52px;
	width: 100%;
	height: 50px;
	background-color: #f5f5f5;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

/* End Footer */

Explicación del concepto

Primero que nada el encargado de realizar este fix son 5 elementos:

html, body{ height: 100%; }

Estos 2 elementos deben ser declarados con alto 100% para que puedas manipular la envoltura #wrapper.

#wrapper{ width: 500px; margin: 0 auto; overflow: hidden; height: auto; min-height: 100%; }

#wrapper por su parte tiene un alto automático y un alto mínimo de 100%, esto significa que ocupara el alto de todo el documento que anteriormente declaramos como 100% con el html y body. Esto genera un scroll debido a que ocupa toda la resolución y los navegadores tienen botones y herramientas en la parte superior.

Ejemplo: mi pantalla tiene un alto de 1050px de los cuales 80px aproximadamente ocupa mi explorador en botones, herramientas, etc. Esto significa que mi envoltura #wrapper necesitará un scroll para suplir los pixeles que faltan.

Este paso se soluciona con un overflow: hidden, que hara que desaparezca el scroll.

Hasta el momento con lo desarrollado te darás cuenta que el footer está en el fondo pero no se ve en ningún momento a menos que hagas scroll, para lo cual analizaremos el footer:

#footer{
	margin-top: -52px;
	width: 100%;
	height: 50px;
	background-color: #f5f5f5;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

El footer tiene un alto de 52px = 50px alto + 1px de borde superior + 1px de borde inferior, luego le aplicamos un margen superior igual a su alto, por lo que agregamos un margin-top: -52px;

Esto hará que el footer se vea dentro de la página, pero tiene un error el cual si reduces el tamaño del navegador veras que se superpone al contenido, así que realizamos el último paso, que es empujarlo hacia abajo con el elemento content:

section.content{
	background-color: #f5f5f5;
	border: 1px solid #eee;
	padding: 20px;
	border-radius: 20px;
	margin: 50px 0 102px 0;
}

La línea que hace aquí el trabajo es el margen inferior de 102px, y esto ¿Por que? te preguntaras, la explicación es la siguiente:

Primero que nada mi margen superior es de 50px y quiero que el footer tenga una distancia de 50px respecto al contenido (para que se vea proporcional), para lo cual analizamos que el footer tiene un margen superior de -52px, asi que matemáticamente seria:

102px – 52px(del footer) = 50px de distancia

Con esto tenemos nuestro footer dinámico que se adaptara a cualquier pantalla solo con CSS.

Recomendaciones al programar el CSS

  • Primero que nada la envoltura #wrapper siempre debe tener un margen superior de 0px o sino nunca calzaran los altos.
  • Puedes utilizar #wrapper con un ancho y centrado pero debes manipularlo con cuidado.
  • Siempre el footer “fuera de #wrapper”
  • Siempre el #wrapper es la envoltura global, nunca debe haber otra fuera de él para manejar correctamente el alto.
  • Si necesitas que el body tenga una position: relative, aplícalo sobre el #wrapper ya que este es el nuevo elemento base y que guía el contenido.

Este ejemplo esta aplicado a este blog pero no lo notaras a menos que poseas una pantalla inmensamente gigante, asi que la demo la puedes encontrar en el siguiente enlace:

Demo online