[SOLUCIONADO] Footer fijo en el fondo de la página

[Kirguiso]

Sí, lo sé, antes de que me digáis nada, en el foro hay varios temas ya que hablan de esto pero... no soy capaz.

A ver estoy "aprendiendo" html, voy poco a poco, y esto no soy capaz por más que busco.

Buscando buscando he encontrado una solución que se acerca mucho a lo que busco.

Código HTML:

footer {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 50px;
}

Pero... que ocurre que el footer si hago la página más pequeña de altura este pisa al contenido.

¿Cómo hago para que el footer no suba a más de X pixeles del último contenido de la página?

Espero haberme explicado bien.

Muchas gracias!

[robert_98]

Hola Kirguiso, son nuevo en el foro pero tengo ganas de aprender y creo que tengo la solución a tu problema, pero hay algo que no he entendido,

1° Quieres que cuando el usuario haga scroll el footer siempre este diponible desde cualquier posición de la pagina.

O

2° Quieres que el usuario se dezplase toda la pagina para encontrarlo.

Define bien lo que desea, te puedo ayudar.

[robert_98]

Aquí te dejo un ejemplo:

https://jsfiddle.net/wjhc1LjL/8/

[Kirguiso]

rober_98 muchas gracias por tu ayuda...

Pero... eso que me has pasado no me funciona... he copiado el footer tal cual y nada... se me queda arriba.

A ver quiero que el footer este siempre abajo del todo, a x pixeles del final de la página y a x pixeles del último contenido de esta.

Como el que he puesto arriba pero que luego si haces pequeña la página no pise el contenido.

No sé si me he explicado bien.

Gracias.

[MrGilbertMan]

deja el footer con posición relativa y dale altura al contenido para que baje.

[ArturoGallegos]

@Kirguiso con el codigo que has colocado no se aprecia mucho el esfuerzo que has llevado acabo para intentar solventar tu problema, sirvete proporcionarnos todo el codigo pertinente para nosotros hacer pruebas y decirte donde fallaste.

por tus comentarios quizas requieras position fixed o bien como dice @MrGilbertMan dale altura al contenido para que baje el footer si o si, aunque no seria una altura fija, puedes usar min-height:

[Kirguiso]

ArturoGallegos, tienes razón.

Aquí os paso todo.

http://www.cssdesk.com/VqEsG

Como veréis sí cerráis mucho la pantalla el footer pisa al contenido.

Gracias!

[ArturoGallegos]

ese es el comportamiento normal de position fixed

siempre se queda el footer abajo y visible sin importar si haces scroll.... aplicale algun background pra que no se vea empalmado e ilegible.

si lo que buscas es que este abajo sin importar la cantidad de contenido pero que quede oculto si el contenido supera el alto, entonces has de hacer lo que te dijo @MrGilbertMan

[lauser]

Revisa este post, tal vez es lo que buscas. http://www.forosdelweb.com/f53/foote...5/#post4747257

[Kirguiso]

lauser eso ya lo he probado y nada... pero sí, eso que sale ahí es lo que quiero hacer

A ver, he visto muchas cosas por internet, varias formas de hacerlo. Pero a la hora de insertarlo en mi código no sé como se hace...

Soy algo torpe, estoy aprendiendo... seguiré intentando a ver si me sale.

[Kirguiso]

Por favor ayuda con el footer.

Madre mía que lío... ¿Pq no me sale?

Como os decía, esto es lo que tengo http://www.cssdesk.com/VqEsG

Y lo que quiero es lo que me indica lauser http://www.forosdelweb.com/f53/foote...5/#post4747257 pero... al llevarlo a mi código no sé como ponerlo y nada, que no funciona.

Gracias!

[ArturoGallegos]

Por mas que lo veo todo funciona OK

lo unico que yo agregaria seria un z-index y un background

[Kirguiso]

ArturoGallegos
Se pisa el contenido, cuando hay mucho texto hacia abajo o haces la pantalla muy pequeña.

[ArturoGallegos]

Parece que le hable a oidos sordos.

Sin afan de ofender, sirvete leer e investigar que es y como funciona el z-index y el background para despues aplicarlos en tu codigo.

[Kirguiso]

No, no, si no ofendes...

Pero la cosa es que esto no me sale, por más que miro nada de nada...

[AngelKrak]

mira amigo, prueba con este codigo ;) asi el footer siempre estara hasta abajo ;)

http://codepen.io/AngelKrak/pen/pjavqe

[Kirguiso]

[URL="http://www.lawebdelprogramador.com/codigo/CSS/2569-Como-poner-el-pie-de-pagina-al-final-de-pagina-con-HTML5-y-CSS.html"]http://www.lawebdelprogramador.com/codigo/CSS/2569-Como-poner-el-pie-de-pagina-al-final-de-pagina-con-HTML5-y-CSS.html[/URL]

Con eso que sale ahí lo he conseguido hacer!! (por si alguno anda tan perdido como yo)

No sé si esa es la mejor forma o no pero... me ha funcionado.

Muchas gracias a todos por vuestra ayuda y sobretodo por vuestra paciencia!!

Gracias máquinas!

[MrGilbertMan]

yo haría esto:

Código HTML:

<div style="height:18000px">
<!-- tu contenido -->
</div>
<footer>
<!-- tu footer -->
</footer>
 

[Kirguiso]

MrGilbertMan

Gracias lo probaré!

[lauser]

MrGilbertMan
Este hilo esta solucionado...aparte de que lo que comentas.................