Ayuda Pie de Pagina (HTML , CSS)

N1Tr0s #1 Abr '12

Buenas, tengo un pie de pagina que me esta volviendo loco.
-El codigo es:

#footer{
width:100%;
background-color:#0F0F0F;
bottom:0px;
position:absolute;
}

Si el contenido de la pagina es menor que el tamaño de la pantalla, funciona OK.
Si el contenido de la pagina es mayor que el tamaño de la pantalla, se situa en el pie de la "pantalla", lo que deja contenido por debajo del pie. EJemplo:
Lo que quiero: que este siempre al fondo de la pagina, tanto si no hay contenido, como si el contenido es brutalmente largo.

Nucklear #2 Abr '12 BugHunter

Ponle al DIV del body la etiqueta clear:both; y quitale al footer el position:absolute.

¿Supongo que el body es solo una columna no?

1 2 respuestas

N1Tr0s #3 Abr '12

#2 Muchas gracias, pero no funciona cuando el contenido de la pagina es menor que el tamaño de la pantalla :S .
Cuando es mayor si que funciona y se va al final.
PD: El body es una sola columna si

1 respuesta

ExTiNcT_ #4 Abr '12 Inocente

Te dejo aquí un ejemplo, el que uso yo, que funciona a la perfección

HTML

<div id="holder">
    <div id="header">Title</div>
    <div id="body">Body</div>
    <div id="footer">Footer</div>
</div>

CSS

html,body{
    height: 100%
}

#header{

}

#holder {
    min-height: 100%;
    position:relative;
}

#body {
    padding-bottom: 100px;
}

#footer{
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
}

1 1 respuesta

Nucklear #5 Abr '12 BugHunter

#3 ¿Puedes poner el CSS del body tambien? Tambien estaría bien el html de las partes afectadas.

Thanat0s #6 Abr '12 Cofrade

Yo este problema tuve que solucionarlo usando js y me pareció muy cutre (y también pregunté en este foro y nadie me supo decir :S )

1 respuesta

tada #7 Abr '12

#1 Si no te entendido mal, tienes que borrar bottom:0px; y position:absolute; ya que esto te situa el div SIEMPRE en la parte inferior de la pantalla y no del contenido de la web.

edit: Podrias usar javascript para mirar si el contenido es mas pequeño o no que la pantalla. Si es mas pequeño usas ese css que tienes ahora y sino le quitas el position:absolute y bottom:0

B

[Borrado] #8 Abr '12

Prueba con un clear:both; como te dijo #2 pero ponlo en un div vacío antes del footer.

<body>
...lo que tengas
<div class="clear"></div>
<div id="footer"></div>
</body>

N1Tr0s #9 Abr '12

Perfecto, lo de #4 funciona a la perfección, muchas gracias a todos por vuestro tiempo.
#6 ya tienes tu solucion ^^

ZHoNNe #10 Abr '12

Para aclarar el uso del clear:both,
el clear:both; se usa cuando has hecho antes un float:left, para dejar el contenido de ese div debajo del div del float:left, si no no sirve de mucho.

1

Ayuda Pie de Pagina (HTML , CSS)

Usuarios habituales

Tags