Cómo Usar el Código Sticky Footer
Introducción
Hay muchos métodos de pie de página pegajoso que se pueden encontrar en Google. He probado muchos de ellos y normalmente fallan en algún punto. El problema parece ser de que algunos de estos métodos son viejos y pudieron funcionar en navegadores antiguos, pero no en las nuevas versiones. Como esas son páginas viejas y con muchas ligas a ellas en el pasado, todavía están bien rankeadas en Google. Muchos webmasters que buscan una solución de pie de página pegajoso terminan rascándose la cabeza intentando estos viejos métodos porque son los primeros que encuentran cuando hacen una búsqueda.
La solución de Ryan Faits es bien conocida, y funciona, pero necesita un <div> extra sin contenido para proveer un "empujón" extra. Algunos puristas del HTML pueden encontrar esto un uso blasfemo de código no semántico. Nuestra solución evita este <div> extra.
La solución Sticky Footer presentada aquí está basada en la información encontrada en El artículo Exploring Footers de A List Apart y aplica entonces un hack clear fix para mantener el pie de página en Google Chrome y otros navegadores donde el pie flotaría cuando se cambie el tamaño de la ventana. El arreglo clear tambien corrije problemas que pueden ocurrir si estás usando floats para hacer diagramas de dos o trs columnas. Ha sido probado en más de 50 navegadores y parece funcionar de maravilla.
El Código HTML
Abajo está la estructura básica del código HTML. Notarás cómo el <div> del pie (footer) está fuera del <div> envoltura (warp).
<div id="wrap"> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>
Tu pondrías los elementos del contenido dentro del <div> principal (main). Por ejemplo, si tu estás usando una diagramación de 2 columnas flotantes podrías tener esto:
<div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div>
Un encabezado puede ser puesto dentro del wrap pero arriba del main así:
<div id="wrap"> <div id="header"> </div> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>
Si quisieras poner cualquier elemento fuera del warp o del footer necesitarías utilizar posicionamiento absoluto, de lo contrario echará a perder los calculos del alto al 100%.
El Código CSS
Abajo está el código CSS que hace que tus piés de página pegajosos se pegen al fondo.
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* debe ser el mismo alto que el footer */
#footer {position: relative;
margin-top: -150px; /* valor negativo del alto del footer */
height: 150px;
clear:both;}
Notarás que el alto del footer es utilizado tres veces aquí. Esto es importante y debe ser el mismo valor en las tres ocaciones. Las propiedades de height están estirando el <div> warp al alto total de la ventana. El margen negativo del footer lo sube dentro del padding creado por el <div> main. Como el main descansa dentro del padding del warp, el alto del padding ya es parte del 100%. Esto hace que el footer descanse al fondo de la página.
Pero no hemos terminado. Necesitamos añadir las propiedades clearfix al <div> main.
El Hack Clearfix al Rescate
Muchos diseñadores de CSS estarán familiarizados con el Hack Clearfix. Este soluciona muchos problemas con elementos flotantes. Nosotros lo usamos aquí para lograr que el footer se pegue en Google Chrome. También soluciona asutnos que vienen con diagramación de 2 columnas donde se flota tu contenido a un lado y una barra lateral al otro. El contenido de los elementos flotantes dentro del <div> main pueden provocar que el footer se despegue en algunos navegadores.
Por eso añadimos esto a la hoja de estilos también:
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Si prefieres usar el método de Ryan Fait con el empujón del <div> extra todavía tendrás que aplicar un clearfix si estás usando una diagramación multicolumna flotante.
Cuestiones Conocidas
Altos y Márgenes
Utilizar márgenes top y bottom dentro de algunos elementos pueden empujar tu footer hacia abajo por ese alto del margen, probablemente en los mismos <div> header, warp o main. En vez de ellos utiliza padding para crear espacio dentro del elemento. Notarás que esto sucede si tu página tiene poco contenido de manera que el footer debería estar al fondo pero verás que la barra de desplazamiento al lado indica que todavía hay un poco debajo del fondo de la ventana. Localiza el margen top o bottom molesto y cámbialo por padding.
Ten cuidado con declarar padding en el <div> main en otra parte de la hoja de estilos. Si tu agregas algo como esto: padding:0 10px 0 10px; acabarás sobreescribiendo el padding del fondo importante que se supone debe ser igual al alto del footer. Esto hará que el footer se empiece a solapar al contenido en las páginas más largas, (en Google Chrome).
Tamaño de Fuentes
Cuando se configuran tamaños de fuente en tu hoja de estilos, si usas tamaños relativos ten cuidado que algunos usuarios pueden tener su configuración de monitor para hacer fuentes más grandes. En algunos elementos, como el mismo pie de página esto puede romper la configuración de altura y crear una brecha abajo del pie de página si no hay suficiente espacio para que el texto se expanda más abajo. Entonces prueba usar tamaños absolutos usando px en vez de pt o em.
