Footer en aprietos

dennitorf1 · #1 (**permalink**) 21/12/2012, 12:39

HOla foreros!...
Tengo un problema algo grave, y que necesito de consultas rápidas y exactas para resolver. El problema es al tratar de hacer un footer que esté estático al final de la página en dos escenarios distintos.
Visiten google, en el formulario de búsqueda inicial hay un footer al fondo de la página, Privacidad y condiciones... etc..etc...
Ahora, cuando hacemos una búsqueda, hay un footer similar en el fondo de la página.
Si organizamos la página de la siguiente forma, un div para el header, otro para content, y otro para footer entonces los dos escenarios son estos:
1. El texto que está en el div content no es grande, no genera desplazamiento en el navegador, el div footer va acomdado al final de la página!...
2. El texto que está en el div content es grande, genera desplazamiento en el navegador, evidentemente, el div footer va entonces luego del div content.

Espero que me entiendan bien la problemática que tengo. Ya he probado infinidad de variantes que he encontrado en internet, y no me resuelven.

Alguna idea, por favor? Es urgente, muchas gracias de antemano....

ArturoGallegos · #2 (**permalink**) 21/12/2012, 12:46

Pues algo bastante común lo que pides y se ha tratado muchas veces, en este link le di la estructura básica a otro usuario para que consiguiera ese efecto, revisalo y adaptalo a tus necesidades

http://www.forosdelweb.com/f53/posic...7/#post4333034

dennitorf1 · #3 (**permalink**) 21/12/2012, 13:10

Hermano, siento, por mi, jaja, decirle que este ejemplo, y esta estructura tiene los mismos problemas que las demas, aqui le envio cuando la pruebo en mi codigo.
Lea bien el POST, hay dos situaciones, cuando no hay texto, y su estructura y código funciona perfectamente, el footer se acomoda en el final de la página; pero en la segunda situación falla, cuando hay bastante texto en la página y se genera desplazamiento en el navegador. Lea bien la pregunté, no sé si logré explicarme bien, o visite google, en google hay un footer cuando vas a buscar (poco texto en la página), y cuando das los resultados de la búsqueda (bastante texto en la página). Sé que es un tema bastante trillado, pero por eso mismo describo bien el problema que tengo, y pido sugerencias para resolverlo. Todavía no me he encontrado un artículo donde lo resuelvan eficientemente, y por ahora estoy usando algo con JavaScript, pero no creo que sea lo más ideal. Si tiene un server PHP, le adjunto aquí el código de la página, prubelo, y vea las dos opciones... cuando no hay texto en la página y cuando hay bastante texto en la página, como el footer no queda al final de la página, sino, al final de lo que muestra el navegador sin desplazarnos. Controle los dos casos con la variable get t. Un abrazo y gracias por la respuesta.

<html>
<head></head>
<body style="margin:0;padding:0;height:100%;font:13px/1.5 arial,verdana,tahoma;color:#333;">
<div id="site" style="height:100%;">
<div id="content" style="width:900px;margin:0 auto;padding-bottom:33px;"> <?php

$text = isset($_GET['t']) ? true : false;

if ($text)
{
for($i = 0; $i <= 150; $i++)
{
echo 'CONTENIDO DE LA PAGINA CUANDO HAY BASTANTE TEXTO '."<br>";
}
}
else
{
echo 'CONTENIDO DE LA PAGINA CUANDO HAY POCO TEXTO';
}

?></div>
</div>
<div id="footer" style="height:33px;margin-top:-33px;background:#000;color:#fff;line-height:33px;text-align:center;">2012 © Ag-freelances</div>
</body>
<html>

ArturoGallegos · #4 (**permalink**) 21/12/2012, 13:29

valla para ser alguien que viene pidiendo ayuda, veo que los modales no se le dan muy bien.

ciertamente ahora que veo el código, tuve un error de dedo... pudo usted molestarse en revisar las propiedades y deducir el problema... pero no.

va ando de buenas y su comentario me ha hecho reír, mas de lo que usted se pudo jactar de un error que tuve.

en el mismo codigo que muestro en ese enlace, corrija la siguiente linea... con eso funcionara

Código HTML:

Ver original#site{min-height:100%;}

y antes que venga a porque le aparecen los scroll aun cuando no hay suficiente contenido, aplique un reset CSS con eso lo solventara.

dennitorf1 · #5 (**permalink**) 21/12/2012, 13:59

perfecto brother... gracias mil.. por la sensibilidad, vaya, disculpe, jaja, si eso cambia en algo, mi espíritu nunca fue el de su respuesta, e ignorante si soy, creo que todos lo somos, la diferencia está en quien se ríe o no de ello, ajajaja, pero no abundaré en eso. vamos a lo importante! tengo ya el resultado que quería, y gracias un millón por su ayuda, no hay que ponerse nostálgicos! un abrazo.

ArturoGallegos · #6 (**permalink**) 21/12/2012, 14:07

No hay de que amigo, el foro esta para aprender mutuamente, por mucho o poco que sepamos siempre se nos puede ir algún detalle.

Suerte en su proyecto.-

dennitorf1 · #7 (**permalink**) 21/12/2012, 14:39

Oye, hermano, disculpa que te moleste otra vez. Hice lo del reset, y aún sigue generando un scroll vertical ahí que no me cuadra mucho. Tienes idea? .... Y gracias otra vez...

ArturoGallegos · #8 (**permalink**) 21/12/2012, 14:48

puedes compensarlo con el margin-top: que se aplica en #footer, solo recuerda que en #content también hay un padding-bottom: este debe ser igual o mayor al margin-top del footer.