Trucos CSS: pie de página fijo
En este caso se trata de hacer un pie de página que siempre está visible, de tal modo que el diseño siempre ocupa el 100% de la altura del monitor.
De todos los ejemplos que circulan por ahí, creo que el mejor es este que os apunto en este post.
Se trata de una práctica no muy aprovechada debido a la altura excesiva que normalmente tienen los sitios, pero para casos en los que se trate de una web no muy grande, como un porfolio o una web de una empresa, se trata de una práctica que puede ser muy útil y visual.
Para todos aquellos que queráis ver el tutorial en inglés este es el enlace. Para el resto, esto es lo que hay que hacer:
<div id="contenedor-general">
<div id="contenedor-contenido">Contenido</div>
<div id="contenedor-pie">Pie</div>
</div>Como veis lo primero a destacar es que tanto el contenedor que contiene el contenido como el que contiene el pie están siempre dentro de un contenedor general que los aglutina.
A continuación empezamos con la CSS, y para empezar definimos las características generales de la página para que el pie pueda verse bien en todos los navegadores.
html, body {
margin: 0;
padding: 0;
height: 100%;
}
A continuación el contenedor general
#contenedor-general {
width: 600px;
background: #DDD;
position: relative;
min-height: 100%;
height: auto !importante;
height: 100%;
}
Ahora definimos el contenedor del contenido principal:
#contenedor-contenido {
padding-bottom: 40px;
}
Y finalmente llegamos al pie
#contenedor-pie {
width: 100%;
background: #CCC;
position: absolute;
bottom: 0 !importante;
bottom: -1px;
height: 40px;
}
Existen otras formas de hacerlo, pero esta es la más «pura» que he visto hasta ahora y las más recomendable.
Si queréis ver un ejemplo de cómo funciona esto lo podéis ver aquí (agrandad y empequeñecer la pantalla del navegador para que veáis como se queda siempre el pie pegado al margen inferior de la pantalla.
excelente, yo lo hacia de otra manera pero esta es mas pura como dices, gracias por el post
Me alegro 😉
de todos modos creo recordar que hubo quien no pudo ponerlo en funcionamiento, dime si has tenido algún problema.
Saludos.
Muchas gracias!!! He buscado esto por todas partes y por fin encontré uno que sí me sirve!
Gracias, voy a probar luego te cuento, que tal me fue.
Hola Anyelo,
en el post tienes un ejemplo práctico de cómo funciona el pie de página fijo, te recomiendo que si tienes problemas, entres en http://qrayg.com/experiment/footerstick/ , te copies el código y sobre él comiences a meter tus estilos.
Suerte !!
Saludos, soy nuevo en esto de los DIV, y me gustaria que me expliques como puedo hacer una pagina en la cual tenga el header, un a la izquierda un navigator o algo, justo al lado el contenedor de la pagina, y al final el footer, ahora he intentado pero siempre el footer me aparece arriba, la pagina inicialmente no contiene mucho contenido, luego de elegir una opcion el footer se coloca al final, como hago para que el footer siempre este al final de la pagina con o sin contenido???
uf… pues no debería. Si ves el ejemplo en (http://qrayg.com/learn/code/footerstick) verás que es una página con scroll y que el pie no se mueve.
Revisa bien los contenedores, y pásale el validador de html, quizás se te quedó algún div sin cerrar….
Suerte !!
Hola, en las pantallas de tamaño normal la verdad es que me ha funcionado genial. Pero tengo un problema con las páginas que son largas y tienen scroll, al bajar el scroll el pie se queda fijo por lo que se sube a la parte de arriba de la pantalla….que puedo hacer???
Hola. Me ha encantado esto. Poco a poco van saliendo cosas sorprendentes y muy útiles. Tengo pensado hacer una web y la primera pagina será corta y esto es lo que me interesa. Pero tengo un problema, y es que en mi css tengo una cabecera uqe arrastra todo hacia abajo.
El ejemplo está muy bueno, pero tuve que amoldarlo a la estructura de mi sitio. Me costó un poco, pero gracias a este pequeño artículo lo pude lograr.
Muchas gracias 😉
Comprueba el código, algo se te ha debido de quedar en el aire. En cuanto a la imagen de fondo que ocupe toda la pantalla ten cuidado, si me estás hablando de una imagen y no de un mosaico que se va a repetir, va a ser una imagen que tarde mucho en cargar por su tamaño. Te recomiendo que busques, simplifiques y metas algo menos pesado.
saludos.
Hola sabes que probe el ejemplo y no me funciona, no se ve centrado, sabes porque sera. Y otra cosa, como puedo hacer para que se vea una imagen de fondo que ocupe toda la pantalla.
Saluods
Prueba a meter las tres columnas dentro del contenedor-contenido y dime si te vale. En teoria no deberías de tener ningún problema.
saludos.
Me ha gustado mucho el pie fijo, pero como lo haces en un diseño de tipo
de cabezal, tres columnas de contenido y un pie?? A las tres columnas le he puesto el padding-bottom: 40px; pero aun así el pie ni siquiera sale 🙁
gracias y saludo
Muchas gracias, comentarios como el tuyo ayudan a seguir 😉
Te he conocido en 20 minutos pues concurso , aunque en cine, y me alegra revisar Blogs, pues me parece un Blog genial, tanto para mis favoritos de internet como de votaciones.
Trabajo en diseño web y siempre me gusta revisar este tipo de Blogs. Enhorabuena… en serio.