Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: JonaLamper en 24 Enero 2017, 23:59 pm



Título: Ayuda: ajustar el footer de una página web
Publicado por: JonaLamper en 24 Enero 2017, 23:59 pm
Buenas de nuevo,

Esta vez tengo un pequeño problema que no logro solucionar: el footer. Resulta que si le ponga la propiedad fixed, cuando el formulario ocupa mucho, el footer lo tapa. Pero es que si quito la propiedad fixed, entonces cuando el formulario ocupa poco, el footer se sube.

No consigo encontrar un termino medio jugando con el posicionamiento del footer  :-\

Imagen con fixed ACTIVADO (el footer tapa elementos del formulario):

(http://thumbs.subefotos.com/ee261f01259919721fff54beb425a031o.jpg) (http://subefotos.com/ver/?ee261f01259919721fff54beb425a031o.png)

Imagen con fixed DESACTIVADO (no tapa elementos, pero si el formulario es pequeño, el footer se sube):

(http://thumbs.subefotos.com/6663a520a7b8cb117767696c7e1851f0o.jpg) (http://subefotos.com/ver/?6663a520a7b8cb117767696c7e1851f0o.png)

De nuevo, muchas gracias por todo.


Título: Re: Ayuda: ajustar el footer de una página web
Publicado por: #!drvy en 25 Enero 2017, 11:48 am
Lo que necesitas es un sticky footer.

https://css-tricks.com/snippets/css/sticky-footer/

Saludos


Título: Re: Ayuda: ajustar el footer de una página web
Publicado por: dato000 en 26 Enero 2017, 15:48 pm
Necesitas el footer siempre "fijo" y que no se sobreponga a los elementos y que tampoco se cambie de sus posición.

Creo que el problema sucede porque tu página esta todo en una posición absoluta, pero con la adición de la propiedad "fixed", en el que su funcionamiento depende del navegador y no del formulario.

Echale un vistazo a este ejemplo:

Property Values CSS School (http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=fixed)

Con este comprobaras los estados que puede manejar un elemento de acuerdo a la propiedad que le asignes.

Ahora creo conveniente que separes los elementos del formulario que manejan la información en una posición relativa, y el footer con una posición absoluta, que depende del bloque del formulario creado en si, y no de sus elementos.

Mira este ejemplo:

CSS “Always on the bottom” Footer (https://codepen.io/cbracco/pen/zekgx/)

Con esto te darás una idea clara de lo que necesitas.