Foros del Web » Creando para Internet » CSS »

100% Height (altura) en un DIV -Firefox help-

Estas en el tema de 100% Height (altura) en un DIV -Firefox help- en el foro de CSS en Foros del Web. Hola a todos, Ya sé que este tema se ha tratado aquí, he hecho búsquedas pero no he podido solucionar los problemas, ya que la ...
  #1 (permalink)  
Antiguo 02/03/2007, 17:04
 
Fecha de Ingreso: agosto-2003
Mensajes: 72
Antigüedad: 14 años, 3 meses
Puntos: 1
100% Height (altura) en un DIV -Firefox help-

Hola a todos,

Ya sé que este tema se ha tratado aquí, he hecho búsquedas pero no he podido solucionar los problemas, ya que la soluciones no se adaptan a mi caso.

El problema es que estoy empezando con CSS y he tenido el típico problema de querer asignar una altura de 100% en un DIV contenedor. He leído sobre lo de tener que asignar a los contenedores del DIV un 100% también de altura, pero en Firefox sigue sin funcionarme.

Os dejo el código a ver si vosotros sabéis cómo solucionarlo:

Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<base href="http://www.netrebels.com" />
<title>netRebels.com</title>

<style type="text/css">
html,body{height: 100%;}
body{
	background-color:#000000;
	margin: 0 0 0 0;
	text-align: center;
}
#container{
	width: 970px;
	text-align: left;
	margin: 0 auto 0 auto;
	background-image:url(images/fondo.gif);
	height: 100%;
}

div.logo{
	width: 338px;
	float: left;
	height: 130px;
}
div.banner{
	height: 130px;
	float:right;
	width: 632px;
	background-image:url(images/logobanner.gif);
}
div.bannerin{
	position: relative;
	width: 468px;
	height: 60px;
	margin: -40px 0 0 -234;
	top: 50%;
	left: 50%;
}
div.ladoizq{
	background-color: #CCCCCC;
	float:left;
	position: relative;
	left: 42px;
	width: 220px;
}
div.ladoder{
	background-color: #CFCFCF;
	position:relative;
	right: 62;
	width: 570;
	float:right;
}
p{
	margin: 0 0 0 0;
	color: #000000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body>
<div id="container">
	<div class="logo"><img src="images/logo.gif" border="0"></div>
	<div class="banner"><div class="bannerin"><script type="text/javascript">google_ad_client = "pub-6786678304682322";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "text";google_ad_channel = "";google_color_border = "242424";google_color_bg = "242424";google_color_link = "B3B3B3";google_color_text = "7F7F7F";google_color_url = "1B703A";</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div></div>
	<div class="ladoizq"><p>General jojojo</p><p>General jojojo</p><p>General jojojo</p></div>
	<div class="ladoder">
		<p>HOLA ESTO ES UNA PRUEBA a la que me remito cantando i bailando y usando unos cuantos estilos a los que me remito cuando uso CSS, esto es realmente lo mejor que existe comparado con el HTML soez y vulgar. Viva yo y vivan los CSS.</p>

		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>

		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>

		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>

		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>

		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>

		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>

		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>

		<p>HOLA ESTO ES UNA PRUEBA</p>
		<p>HOLA ESTO ES UNA PRUEBA</p>
	</div>
</div>
</body>
</html>
Y aquí como se ve en un explorador y en el otro:

Iexplorer [correctamente]
http://img410.imageshack.us/img410/9...xplorermo4.jpg

Firefox [container cortado]
http://img137.imageshack.us/img137/80/firefoxtx8.jpg


En Firefox, se ve el 100% de la ventana, el problema es que cuando haces scroll para abajo este se queda en el 100% de la ventana y no de todo el documento... no se si me explico, podéis verlo en:

http://www.netrebels.com/index2.php

Saludos y gracias de antemano...
  #2 (permalink)  
Antiguo 02/03/2007, 17:48
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: 100% Height (altura) en un DIV -Firefox help-

Hola, tebb.
Efectivamente, como dices este tema se ha visto muchas veces en el foro y se han aplicado diversas soluciones, pero lo difícil suele ser encontrar el término a buscar para dar con ellas.

En tu caso, la solución sería esta:

Añade una clase a la parte del css como esta:

.corte { clear: both;}

Y ahora añade al html un div con esa clase, al final del documento, justo antes de cerrar el último div:

</div>
<div class="corte"></div>
</div>
</body>
</html>

Creo que con esto bastará.

Mikel.
  #3 (permalink)  
Antiguo 02/03/2007, 17:56
 
Fecha de Ingreso: agosto-2003
Mensajes: 72
Antigüedad: 14 años, 3 meses
Puntos: 1
Re: 100% Height (altura) en un DIV -Firefox help-

Hola Mikimoro, muchas gracias por la ayuda, pero no ha solucionado el problema:

http://www.netrebels.com/index3.php

No sé si es que lo he hecho mal (no creo) o es que falla otra parte del código, pero en Firefox sigue viéndose mal...

La verdad es que ya no sé que hacer ni probar para solucionarlo...
  #4 (permalink)  
Antiguo 02/03/2007, 18:01
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: 100% Height (altura) en un DIV -Firefox help-

Oh, perdona: se me ha olvidado decirte que quitaras el height: 100%; del selector #container.
Lo siento. Prueba ahora.

Mikel.
  #5 (permalink)  
Antiguo 02/03/2007, 18:04
 
Fecha de Ingreso: agosto-2003
Mensajes: 72
Antigüedad: 14 años, 3 meses
Puntos: 1
Re: 100% Height (altura) en un DIV -Firefox help-

Woah, ¡perfecto!

¡Por fin veo la luz! jeje, muchísimas gracias, en serio ;)

Por cierto, ¿alguna breve explicación de porque pasa esto y en que consiste esa solución?

¡Gracias otra vez, me has alegrado el día! :)
  #6 (permalink)  
Antiguo 02/03/2007, 18:21
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: 100% Height (altura) en un DIV -Firefox help-

Pasa porque en css una caja no debe crecer si crecen otras cajas que lleve dentro flotadas (IE lo interpreta mal y siempre crece, lo que suele producir otros problemas).
Entonces para que crezca, hay que producir un corte, un salto de línea, lo que obliga a que el espacio "virtual" que ocupan las cajas flotadas se convierta en espacio "físico", y entonces la caja contenedora sí crece para albergar a las que tiene dentro.

El último error se debía a que, aunque fuerces ese corte, si dices que la caja mide el 100%, mide el 100% y punto, y el corte no puede cambiar eso (no así en IE, que hace lo que le da la gana y crece siempre).

Me alegro de haberte ahorrado tiempo y quebraderos de cabeza

Mikel.
  #7 (permalink)  
Antiguo 02/03/2007, 19:53
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Re: 100% Height (altura) en un DIV -Firefox help-

Complementando la explicación de Mikmoro, cabe señalar que en los navegadores que respetan la espicificación de las CSS, la propiedad height mantiene fija la altura que se haya definido, y no crecerá más independiente de la cantidad de contenido que coloques dentro. Esto a diferencia de min-height que te permite definir una altura mínima inicial, pero que crecerá a medida que lo requiera su contenido.

Hasta la versión 6 de IE esto no ocurría, donde no había soporte para min-height, siendo height la propiedad que emulaba sus características.
__________________
El conocimiento es libre: Movimiento por la Devolución
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 16:59.