body, html {100%} NO FUNCIONA

fernbs · #1 (**permalink**) 24/09/2011, 06:29

Escribo porque no encuentro la solución por ningún lado.

En mi Web he creado una página de prueba para que veáis lo que pasa:

http://www.fakyea.com/pruebas/prueba

Como véis, cuando el contenido no estira el Container, el Footer no se ajusta al final del browser.

He intentado de todo, poniendo todos los Height, min-height a 100%, añadiendo "auto" (tanto a HTML, BODY, CONTAINER, WRAPPER...)

He intentado el truco este de poner un div al final del container, con el tamaño del Footer para que empuje y nada.

Nada funciona.
Alguien sabe por qué???

Muchas gracias de antemano!!

Hazuki · #2 (**permalink**) 24/09/2011, 10:48

Échale un ojo a este website:
http://www.cssstickyfooter.com/

IsaBelM · #3 (**permalink**) 24/09/2011, 12:34

o este otro

fernbs · #4 (**permalink**) 26/09/2011, 09:59

Bufff, no me funcionan ninguno de los 2! Si es que he probado de todo y nada funciona!

daPhyre · #5 (**permalink**) 26/09/2011, 12:26

¿Pusiste un "position:absolute;bottom:0" a tu footer?

fernbs · #6 (**permalink**) 29/09/2011, 08:56

Ahora ya he conseguido que el footer se quede abajo pero no consigo que el contenido se pegue al footer, me deja un espacio entre medias!!!

daPhyre · #7 (**permalink**) 29/09/2011, 14:06

Si el footer es absoluto, el margin-bottom indica la separación entre el contenido y el fondo. ¿Tienes tu página en algún lado?

fernbs · #8 (**permalink**) 30/09/2011, 06:15

He conseguido que "funcione".

Ahora está como debería solo que al "Wrap", cuando le doy un height 100%, se hace muy grande, y si lo pongo a 40%, me hace un tamaño aprox para que se vea bien en firefox, chrome y explorer, pero no se elimina la barra de desplazamiento porque es aproximado. Es decir, una solución muy cutre.

Lo puedes ver en www.fakyea.com/foro

Hazte un usuario, salta el paso de la foto y la sigueinte página lo puedes ver bien. (yo te borro el usuario una vez creado, que está en pruebas el foro, no está publicado!)

daPhyre · #9 (**permalink**) 30/09/2011, 12:55

Estoy perdido. Ya di tres vueltas a la página y no encuentro la página que mencionas. ¿No tienes una página estática que muestre eso? :S

fernbs · #10 (**permalink**) 05/10/2011, 06:00

Puedes verlo aquí:

http://www.fakyea.com/pruebas/pruebas

No hay nada de contenido pero tiene algo de espacio ahí (debido a que he tenido que poner height 40% porque sino no se ajustaba).

daPhyre · #11 (**permalink**) 05/10/2011, 11:09

Creo que no termino de comprender, yo lo veo sin problemas... ¿Qué debería hacer que no está haciendo?

fernbs · #12 (**permalink**) 06/10/2011, 04:28

Lo que pasa es que no se ajusta automáticamente. El footer está abajo del todo, pero entre medias hay mucho espacio. Ese espacio, no debería de estar. No debería de haber un scroll bar.

Ese espacio está porque yo he puesto que el height sea 40% (que es un cálvulo aproximado para que se vea más o menos bien en todos los exploradores). Ese tamaño deberia de ser 100% o auto, pero si pongo 100%, el espacio es gigante y si pongo "auto", el footer se sube!!!

daPhyre · #13 (**permalink**) 06/10/2011, 13:10

Prueba esto:

Al contenedor general, ponle el 100% de height y un padding de la misma altura que el footer. Al footer, ponle un position:absolute;bottom:0.

Avísame si te resulta.

fernbs · #14 (**permalink**) 10/10/2011, 08:34

Más o menos, sigue saliendo un scrollbar y no se ve el footer entero.

http://www.fakyea.com/pruebas/pruebas

kseso? · #15 (**permalink**) 10/10/2011, 08:46

la estructura más sencilla que conozco para un "pie abajo"

Código CSS:

Ver original* {margin:0; padding:0; position: relative;}
html, body { height: 100%;}
#contenedor {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -1em;
}
 
.empuje {height:1em;}
 
#pie {
min-height: 1em;
height: auto !important;
height: 1em;
}

Código HTML:

Ver original<div id="contenedor">
     <p>Todo el contenido menos el pie</p>
    <div class="empuje"></div>
</div>
 
</div> <div id="footer">
    <p>Contenido del pie</p>
</div>

Nada de posiciones absolutas y si hay elementos flotados en "contenedor" o "pie" no olvidarse de limpiar los floats.

fernbs · #16 (**permalink**) 10/10/2011, 10:26

Rectifico, me funciona mucho peor, imagino que por el absolute.

Cómo es eso de limpiar los floats? Lo que me pasa es que si pongo el height 100% en el container general, me crea un espacio muy grande en medio!

He probado de todo y nada funciona!

daPhyre · #17 (**permalink**) 10/10/2011, 13:32

Mejor vamos a lo directo...

¿Es esto lo que intentas lograr?
http://source.octabot.net/web-tips/f...tom-fixed.html

fernbs · #18 (**permalink**) 14/10/2011, 01:23

Justo! Que aunque el contenido no llegue hasta abajo, el footer se quede abajo pero SIN scrollbar (que es lo que me hace a mi).

daPhyre · #19 (**permalink**) 14/10/2011, 13:16

¿Sin scrollbar? Si el contenido es mayor a la página, a fuerza mostrará el scrollbar... ¿Cómo pretendes que no lo muestre?

¿O dices que el scrollbar aparece aun si el contenido es menor? ¿No te funciona el código que dejé en esa página?