DIV con porcentajes

dr. attach · #1 (**permalink**) 30/12/2006, 00:33

Hola a todos, estoy tratando de hacer un footer y que este siempre se encuentre en la parte inferior de la página, para ello he desarrollado el siguiente codigo:

Código:

<style type="text/css">
<!--
html,body{height:100%; margin:0px;}
#contenedor{height:100%; border:1px solid #FF0000; margin-bottom:40px;}
#pie{height:40px; margin:-40px 0 0 0; border:1px solid #FFFF00;}
-->
</style>
</head>
<body>
	<div id="contenedor">
	contenido
	</div>
	<div id="pie">pie</div> 
</body>

El problema con esto es que el footer termina debajo del diseño y tengo que darle scroll para que funcione, alguien ha tenido este problema y ha encontrado solucion?

Se agradece de antemano.

Saludos

Mikmoro · #2 (**permalink**) 01/01/2007, 05:55

Buenas.
Juraría que ese efecto se produce por ponerle al contenedor que ocupe el 100% y añadir un margen inferior de 40px. Aunque subas la parte inferior del contenedor 40px, al medir el 100% él sigue ocupando realmente el total de la página, por lo que el pie aparece donde le corresponde; si el contenedor ocupa el 100% el pie aparecerá después.

Elimina el margen inferior del contenedor y creo que conseguirás lo que buscas.

Mikel.

dr. attach · #3 (**permalink**) 02/01/2007, 08:49

ya probe, pero no funciona. Si le quito el margen no se coloca en la parte inferior

Si alguien tiene algun otra sugerencia, se lo agradecería.

Saludos

Shade · #4 (**permalink**) 02/01/2007, 09:25

Mira, el problema es que el 100% busca el % de resolucion que tienes (considera que los navegadores ocupan un % de la resolucion) asi que tienes que desarrollar algo del estilo:

Código:

<style type="text/css">
<!--
html,body{margin:0px;}
#contenedor{height:80%; border:1px solid #FF0000; padding-bottom:40px;}
#pie{height:40px; margin:0px 0px; border:1px solid #FFFF00;}
-->
</style>
</head>
<body>
	<div id="contenedor">
	contenido
	</div>
	<div id="pie">pie</div> 
</body>

dr. attach · #5 (**permalink**) 02/01/2007, 09:40

Tampoco funciona :(, ahora no llega ni hasta abajo.

Saludos

Mikmoro · #6 (**permalink**) 02/01/2007, 11:26

¿No llega hasta abajo porque el contenido es más largo que una pantalla, es decir, sale el scroll vertical? Creo que deberías especificarlo, porque según sea, creo que la solución sería de una forma u otra.

Mikel.

dr. attach · #7 (**permalink**) 02/01/2007, 12:00

Hola Mikmoro, a lo que me refiero es que si coloco el codigo de Shade, exactamente como lo ves, no llega hasta abajo.

Y si lo pones de la forma que yo lo hice, sale un scroll pero tengo q bajar un poco mas todavia para ver el footer.

Espero se entienda mejor

Mikmoro · #8 (**permalink**) 02/01/2007, 12:31

De acuerdo, pero debe ser que no nos entendimos.
Como te comenté, si a tu código le quitas el margin-bottom de 40 px del selector "contenedor"
#contenedor{height:100%; border:1px solid #FF0000; margin-bottom:40px;},

consigues lo que tú querías. O al menos, al ver tu respuesta de que el pie no llegaba abajo con lo que te propuse, lo he probado y es como yo lo veo en IE y FF; el pie abajo en la página. Como te comento, si tu contenido es grande y fuerza el scroll de la propia página, entonces hay que pensar otra solución, pero si el contenido ocupa digamos "una pantalla", con esto debería bastar.

Si tienes alguna forma de publicarlo y que pueda ver el problema, te diré lo que creo, y seguro que más gente también apuntará posiblidades. Un saludo.

Mikel.

kazafun · #9 (**permalink**) 02/01/2007, 13:06

Mirate este excelente link queme paso una vez un moderador de FDW.

http://www.tierradenomadas.com/rc010.phtml