Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Footer fijo en el fondo de la página en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/10/2015, 04:03
 
Fecha de Ingreso: octubre-2015
Mensajes: 31
Antigüedad: 8 años, 5 meses
Puntos: 0
Footer fijo en el fondo de la página

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!
  #2 (permalink)  
Antiguo 20/10/2015, 04:46
 
Fecha de Ingreso: octubre-2015
Mensajes: 18
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Footer fijo en el fondo de la página

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.
  #3 (permalink)  
Antiguo 20/10/2015, 05:05
 
Fecha de Ingreso: octubre-2015
Mensajes: 18
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Footer fijo en el fondo de la página

Aquí te dejo un ejemplo:

https://jsfiddle.net/wjhc1LjL/8/
  #4 (permalink)  
Antiguo 20/10/2015, 07:51
 
Fecha de Ingreso: octubre-2015
Mensajes: 31
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Footer fijo en el fondo de la página

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.
  #5 (permalink)  
Antiguo 20/10/2015, 08:30
 
Fecha de Ingreso: enero-2015
Ubicación: Cordoba, Andalucía
Mensajes: 111
Antigüedad: 9 años, 2 meses
Puntos: 15
Respuesta: Footer fijo en el fondo de la página

deja el footer con posición relativa y dale altura al contenido para que baje.
  #6 (permalink)  
Antiguo 20/10/2015, 08:48
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Footer fijo en el fondo de la página

@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:
  #7 (permalink)  
Antiguo 20/10/2015, 09:28
 
Fecha de Ingreso: octubre-2015
Mensajes: 31
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Footer fijo en el fondo de la página

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!
  #8 (permalink)  
Antiguo 20/10/2015, 10:58
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Footer fijo en el fondo de la página

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
  #9 (permalink)  
Antiguo 20/10/2015, 11:37
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 8 meses
Puntos: 401
Respuesta: Footer fijo en el fondo de la página

Revisa este post, tal vez es lo que buscas. http://www.forosdelweb.com/f53/foote...5/#post4747257
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #10 (permalink)  
Antiguo 20/10/2015, 13:11
 
Fecha de Ingreso: octubre-2015
Mensajes: 31
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Footer fijo en el fondo de la página

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.
  #11 (permalink)  
Antiguo 21/10/2015, 09:49
 
Fecha de Ingreso: octubre-2015
Mensajes: 31
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Footer fijo en el fondo de la página

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!
  #12 (permalink)  
Antiguo 21/10/2015, 11:53
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Footer fijo en el fondo de la página

Por mas que lo veo todo funciona OK

lo unico que yo agregaria seria un z-index y un background
  #13 (permalink)  
Antiguo 21/10/2015, 12:21
 
Fecha de Ingreso: octubre-2015
Mensajes: 31
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Footer fijo en el fondo de la página

ArturoGallegos
Se pisa el contenido, cuando hay mucho texto hacia abajo o haces la pantalla muy pequeña.
  #14 (permalink)  
Antiguo 21/10/2015, 12:24
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Footer fijo en el fondo de la página

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.
  #15 (permalink)  
Antiguo 21/10/2015, 13:16
 
Fecha de Ingreso: octubre-2015
Mensajes: 31
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Footer fijo en el fondo de la página

No, no, si no ofendes...

Pero la cosa es que esto no me sale, por más que miro nada de nada...
  #16 (permalink)  
Antiguo 21/10/2015, 21:55
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 4 meses
Puntos: 91
Respuesta: Footer fijo en el fondo de la página

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

http://codepen.io/AngelKrak/pen/pjavqe
  #17 (permalink)  
Antiguo 22/10/2015, 09:41
 
Fecha de Ingreso: octubre-2015
Mensajes: 31
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Footer fijo en el fondo de la página

[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!
  #18 (permalink)  
Antiguo 22/10/2015, 11:12
 
Fecha de Ingreso: enero-2015
Ubicación: Cordoba, Andalucía
Mensajes: 111
Antigüedad: 9 años, 2 meses
Puntos: 15
Respuesta: Footer fijo en el fondo de la página

yo haría esto:

Código HTML:
Ver original
  1. <div style="height:18000px">
  2. <!-- tu contenido -->
  3. </div>
  4. <!-- tu footer -->
  #19 (permalink)  
Antiguo 22/10/2015, 11:16
 
Fecha de Ingreso: octubre-2015
Mensajes: 31
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Footer fijo en el fondo de la página

MrGilbertMan

Gracias lo probaré!
  #20 (permalink)  
Antiguo 22/10/2015, 11:19
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 8 meses
Puntos: 401
Respuesta: Footer fijo en el fondo de la página

MrGilbertMan
Este hilo esta solucionado...aparte de que lo que comentas.................
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-

Etiquetas: fijo, footer, html, página, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:06.