Retroceder   Foros del Web > Diseño de Sitios web > CSS

Respuesta
 
Herramientas Desplegado
Antiguo 02-mar-2007, 16:04   #1 (permalink)
Tebb está en el buen camino
 
Fecha de Ingreso: agosto-2003
Mensajes: 60
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...
Tebb está desconectado   Responder Citando
Antiguo 02-mar-2007, 16:48   #2 (permalink)
Colaborador
Mikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradable
 
Avatar de Mikmoro
 
Fecha de Ingreso: octubre-2006
Ubicación: A tu espalda
Mensajes: 3.351
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.
Mikmoro está desconectado   Responder Citando
Antiguo 02-mar-2007, 16:56   #3 (permalink)
Tebb está en el buen camino
 
Fecha de Ingreso: agosto-2003
Mensajes: 60
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...
Tebb está desconectado   Responder Citando
Antiguo 02-mar-2007, 17:01   #4 (permalink)
Colaborador
Mikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradable
 
Avatar de Mikmoro
 
Fecha de Ingreso: octubre-2006
Ubicación: A tu espalda
Mensajes: 3.351
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.
Mikmoro está desconectado   Responder Citando
Antiguo 02-mar-2007, 17:04   #5 (permalink)
Tebb está en el buen camino
 
Fecha de Ingreso: agosto-2003
Mensajes: 60
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! :)
Tebb está desconectado   Responder Citando
Antiguo 02-mar-2007, 17:21   #6 (permalink)
Colaborador
Mikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradableMikmoro es realmente agradable
 
Avatar de Mikmoro
 
Fecha de Ingreso: octubre-2006
Ubicación: A tu espalda
Mensajes: 3.351
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.
Mikmoro está desconectado   Responder Citando
Antiguo 02-mar-2007, 18:53   #7 (permalink)
frijolerou tiene algunos puntos positivos de karma
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.575
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
frijolerou está desconectado   Responder Citando
Respuesta
No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 23:01.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93