Foros del Web » Creando para Internet » CSS »

DIV con porcentajes

Estas en el tema de DIV con porcentajes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/12/2006, 00:33
 
Fecha de Ingreso: febrero-2003
Mensajes: 795
Antigüedad: 14 años, 10 meses
Puntos: 2
DIV con porcentajes

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
__________________
Carlo Rodríguez
florerias en lima
  #2 (permalink)  
Antiguo 01/01/2007, 05:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: DIV con porcentajes

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.
  #3 (permalink)  
Antiguo 02/01/2007, 08:49
 
Fecha de Ingreso: febrero-2003
Mensajes: 795
Antigüedad: 14 años, 10 meses
Puntos: 2
Re: DIV con porcentajes

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
__________________
Carlo Rodríguez
florerias en lima
  #4 (permalink)  
Antiguo 02/01/2007, 09:25
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: DIV con porcentajes

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>
  #5 (permalink)  
Antiguo 02/01/2007, 09:40
 
Fecha de Ingreso: febrero-2003
Mensajes: 795
Antigüedad: 14 años, 10 meses
Puntos: 2
Re: DIV con porcentajes

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

Saludos
__________________
Carlo Rodríguez
florerias en lima
  #6 (permalink)  
Antiguo 02/01/2007, 11:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: DIV con porcentajes

¿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.
  #7 (permalink)  
Antiguo 02/01/2007, 12:00
 
Fecha de Ingreso: febrero-2003
Mensajes: 795
Antigüedad: 14 años, 10 meses
Puntos: 2
Re: DIV con porcentajes

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
__________________
Carlo Rodríguez
florerias en lima
  #8 (permalink)  
Antiguo 02/01/2007, 12:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: DIV con porcentajes

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.
  #9 (permalink)  
Antiguo 02/01/2007, 13:06
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Re: DIV con porcentajes

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

http://www.tierradenomadas.com/rc010.phtml
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:25.