Es un efecto muy bueno y no hay muchos sitios que lo implementen. El uso de un footer fijo tiene muchas utilidades además de ser algo muy bonito ^_^. Piensen que tendrán una cantidad de opciones, enlaces y demás todo el tiempo al alcance del usuario.
CSS Sticky Footer es un script de CSS listo para que copies y pegues en tu proyecto web. La mayor ventaja es que funciona con Internet Explorer 5, 6, 7 y 8, además de Firefox, Opera y Safari, entre otros.
CSS Sticky Footer: un footer fijo con estilos CSS
Agrega las siguientes lÃneas de código CSS a tu hoja de estilos. El valor negativo para el margen en .wrapper es el mismo número que el alto de .footer y .push. El margen negativo siempre deberÃa ser igual que la altura total del footer (incluyendo paddings o bordes que hayas o no agregado).
|
En tu HTML, sigue la siguiente estructura. Nada del contenido puede estar fuera de .wrapper ni de .footer salvo que ya esté posicionado por medio de CSS:
|
¿Tienes problemas?
- Agregar márgenes a los elementos puede ser un lÃo. Usa
paddingen su lugar y se solucionarán todos tus problemas. - Si no te funciona con “x” navegador, chequea que esté soportado y si has copiado bien el código.
Las propiedades height: auto !important; y height: 100%;
Ya sé que anda perfecto sin ellas. Son simplemente un pequeño hack para que el footer funcione en Internet Explorer 6, asà que ¡No las elimines!
Haz clic aquà para ver un ejemplo de cómo queda este efecto.








Viernes, 16 de Mayo de 2008 a las 18.53
Uyyy muy bueno! capaz le dé algún tipo de uso alguna vez
buenisimo, gracias!
Sábado, 14 de Junio de 2008 a las 15.50
NORMALmente buscamos estilos seguros , estos son uno de ellos
faciles de implementar
gracias
Lunes, 16 de Junio de 2008 a las 15.14
Hay que agradecer y felicitar a Ryan Fait por permitirnos usar sus modelos prediseñados.Ojala todos fuesen asi con sus esposas
Lunes, 8 de Septiembre de 2008 a las 22.56
No me funciona. me podrÃas ayudar??? mira copio el código y todo bien solo que cuando le doy un width:850px; en ie7 pasa algo que me fastidia deja un pequeño margen en la parte inferior.
se ve flotando el footer, y en fire fox si anda bien a que se debera????
creen conveniente que peque el código??
lo mas curioso es que si le dejo el width de 700px si se queda el footer pegado
Lunes, 8 de Septiembre de 2008 a las 22.59
ese width de 850px se lo doy en el wrapper
Martes, 9 de Septiembre de 2008 a las 10.28
¿Haz probado copiando el código de ejemplo del enlace? Tal vez ayude…
Martes, 9 de Septiembre de 2008 a las 19.16
Alguien que me ayude??
le mando el código por correo??
Martes, 9 de Septiembre de 2008 a las 19.18
Por que no puedo pegar el código a qui no me deja. si probé copiando el código del enlace y me hace lo mismo me estoy desesperando..
Martes, 9 de Septiembre de 2008 a las 19.30
jajajajaja en mi desesperación por el footer flotante presione f5 sin querer y se re acomodo y se pego.
y es que cada vez que cambiaba el tamaño y ejecutaba la pagina flotaba el footer, pero se soluciona con un refresh.
espero en lo mas profundo que este post le sirva a alguien que se aya asustado como yo. pero ese maldito navegador de ie siempre sacando canas….
Viernes, 26 de Junio de 2009 a las 22.50
Solucionen este problema:
Valor incompatible: ‘fixed’
Afecta: Internet Explorer 7.0, 8.0b1; Internet Explorer for Macintosh 5.2:
@media screen{
body>div#footer{
position: fixed;