Problema con alto completo

thunder.scripts · #1 (**permalink**) 19/03/2005, 15:57

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<title>prueba</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">

		#contenedor {
			width: 760px;
			height: 100%;
			margin: auto;
		}
		#left {
			background-color:#003399;
			width: 250px;
			float: left;
		}
		#right {
			background-color: #FF0000;
		}
		#bottom {
			background-color: #00FF00;
		}

	</style>
</head>

<body>
<div id="contenedor">

	<div id="left">
		a
	</div>

	<div id="right">
		b
	</div>


	<div id="bottom">
		c
	</div>

</div>
</body>
</html>

Supongamos que tengo una estructura de ese estilo, bien simple. Ahora, necesito que #left y #right se estiren al 100% pero dejando el espacio necesario para #bottom. ¿Cómo podría hacerlo?

Gracias
Fede

Remo:Erdosain · #2 (**permalink**) 19/03/2005, 17:24

¿Acaso no te está faltando esto?

Código:

body, html {height:100%;}

thunder.scripts · #3 (**permalink**) 19/03/2005, 18:04

Uh que boludo. Lo tengo en la hoja de estilos, pero cuando lo copie aca para ponerlo todo junto se me perdio en el camino :D

Anyway, alguna idea?

programeitor · #4 (**permalink**) 19/03/2005, 18:04

Dale a #left y #right un height:100%

thunder.scripts · #5 (**permalink**) 19/03/2005, 18:48

Pero haciendo eso las dos columnas se estirarían ocupando toda la pantalla y #bottom quedaría oculto hasta que el usuario baje con la scrollbar.

programeitor · #6 (**permalink**) 19/03/2005, 19:22

#contenedor {
width: 760px;
height: 100%;top:0;
margin: auto;
}
#left {
background-color:#003399;
width: 250px;height: 95%;
float: left;
}
#right {
background-color: #FF0000;height: 95%;
}
#bottom {
background-color: #00FF00;height: 10%;
}
body, html {height:90%;}

Esto queda bien en IE y un poco corto en NS

thunder.scripts · #7 (**permalink**) 19/03/2005, 22:48

Pensé que el hacerlo con porcentajes haría que #bottom se agrandara demasiado en aquellos casos donde la pantalla es muy extensa, pero lo voy a probar y ver cómo queda.

Muchas gracias
Fede

programeitor · #8 (**permalink**) 20/03/2005, 06:32

De nada Fede ,es cuestion de jugar con los porcentajes ,si quieres que el #bottom tenga una altura fija ,por ejemplo 100px ,se la das y varia luego el porcentaje de las columnas.

No se si puede hacerse de otra forma ,seria cuestion de experimentar.

Saludos.

thunder.scripts · #9 (**permalink**) 20/03/2005, 09:17

Claro, pero tengo el mismo problema. Con una resolución muy chica me aparecería el scrollbar vertical y con una muy grande me sobraría espacio. Se me hace imposible hacerlo con porcentajes.

Gracias
Fede

programeitor · #10 (**permalink**) 20/03/2005, 10:04

Pero eso es debido a que les tienes asignado un ancho fijo en px al contenedor=760 y a left=250., si se ve desde ua pagina de 640*480 el contenedor se sale de pantalla, tendrias que aplicarle la anchura tambien en porcentages o maximo 640 o lo que permita sin mostrar el scroll.

Es muy recomendable, para no tener este tipo de problemas ,que todas las medidas vallan en porcentajes.

thunder.scripts · #11 (**permalink**) 20/03/2005, 10:18

Bueno, pero ese no es mi problema ahora. El ancho del contenedor es uno arbitrario.
Pero, por ejemplo, le doy 150px de alto a #bottom y un alto en porcentajes a las columnas #left y #right. Trabajo en 1027x768, así que lo hago encajar perfectamente, pero en diferentes resoluciones no va a quedar igual por el hecho de que el 90% de 600 no es igual al 90% de 768 ni al 90% de 1024.

Por ahora lo solucioné usando display:table, pero no funciona en IE. (http://www.forosdelweb.com/f53/display-table-colspan-281358/)

Gracias
Fede