editando el pie de pagina

El pie de página (o footer, como se lo conoce en inglés) es un elemento tradicional del diseño web, y sin embargo no hay métodos claros para lograr que se sitúe donde su nombre indica: al pie de la página. El problema común es que, si el contenido de la página es muy breve, el footer se eleva y queda, en el mejor de los casos, a media página.

Un método bastante usado es utilizar position:fixed y bottom:0 para forzar al footer a permanecer siempre pegado al borde inferior de la ventana, pero esto no funciona en versiones anteriores de Internet Explorer y si el contenido es extenso y supera el borde inferior de la ventana, el footer simplemente flota sobre el contenido.

Scriptaculous footer 2
En script.aculo.us, el footer flota sobre el contenido excedente gracias al uso de position:fixed y bottom:0;

Muchas veces, lo que se quiere es que el footer esté situado en el borde inferior de la ventana, si el contenido es muy breve, pero que sea empujado hacia abajo por el contenido si éste es más extenso.

La técnica siguiente logra justamente eso.

Primero, el HTML. En nuestro ejemplo, tendremos un elemento “container” que contendrá el contenido principal. A continuación, el pie de página o footer que pretendemos domar.
Code (html)

1.
2.
< b o d y >
3.

4.

5.
Este es mi contenido principal.
6.

7.

8.
< d i v id="footer">
9.
EstadoBeta 2005-2007
10.

11.
< / b o d y >
12.

La clave está en el CSS:
Code (css)

1.

2.
html,body {
3.
height:100%;
4.
}
5.
#container {
6.
min-height: 100%;
7.
}
8.
/* Hack para IE 6 */
9.
* html #container {
10.
height:100%;
11.
}
12.
#footer {
13.
position:relative;
14.
height:40px;
15.
margin-top:-40px;
16.
}
17.

Con el primer selector, damos una altura a los elementos principales, HTML y BODY. Al fijarles 100% les damos la altura total de la ventana del navegador, cualquiera que esta sea.

A continuación, damos un min-height de 100% al elemento contenedor, #container. Este es el 100% de la altura de los elementos superiores, es decir HTML y BODY, que a su vez tienen el 100% de la ventana. Esto significa que la altura mínima de #container siempre será la altura de la ventana. Sin importar la extensión del contenido, el elemento que lo contiene se extenderá hasta el borde inferior de la ventana. Y aquí es donde viene el corazón del truco.
Code (css)

1.

2.
#footer {
3.
position:relative;
4.
height:40px;
5.
margin-top:-40px;
6.
}
7.

Sin este código, el footer se situaría simplemente abajo del #container, es decir abajo y fuera de la ventana. Lo que sucede es que, primero, le damos position:relative, que lo deja en el mismo lugar pero lo posiciona visualmente sobre el contenido en caso de reducir el tamaño de la ventana. A continuación, fijamos una altura específica al footer y le damos un margen superior negativo de la misma medida. Con esto, el footer “se sube” arriba del container en la misma medida de su altura.

Así se logra un footer que esté siempre abajo del contenido y pegado al bottom de la ventana si el contenido es muy corto.

Aquí incluyo un .zip con archivos de ejemplo y elementos extra como un menu lateral (perdonen los horribles colores!). Abran el archivo index.html en su navegador y prueben agrandando y achicando la ventana para ver el comportamiento de este truco.

Fuente: footerStickAlt: A more robust method of positioning a footer.

css, footer, tips

About The Author

Diseñadora grafica / Desarrolladora web / wordpress themes y mas

No Comments