Foros del Web » Creando para Internet » CSS »

Problema con alto completo

Estas en el tema de Problema con alto completo en el foro de CSS en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 19/03/2005, 15:57
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
Problema con alto completo

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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #2 (permalink)  
Antiguo 19/03/2005, 17:24
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
¿Acaso no te está faltando esto?
Código:
body, html {height:100%;}
  #3 (permalink)  
Antiguo 19/03/2005, 18:04
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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?
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #4 (permalink)  
Antiguo 19/03/2005, 18:04
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Dale a #left y #right un height:100%
  #5 (permalink)  
Antiguo 19/03/2005, 18:48
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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.
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #6 (permalink)  
Antiguo 19/03/2005, 19:22
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
#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
  #7 (permalink)  
Antiguo 19/03/2005, 22:48
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #8 (permalink)  
Antiguo 20/03/2005, 06:32
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
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.
  #9 (permalink)  
Antiguo 20/03/2005, 09:17
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #10 (permalink)  
Antiguo 20/03/2005, 10:04
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
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.

Última edición por programeitor; 20/03/2005 a las 10:06
  #11 (permalink)  
Antiguo 20/03/2005, 10:18
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
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 03:00.