Foros del web, para los que viven de bits

thunder.scripts · 19-mar-2005, 14: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 · 19-mar-2005, 16:24

¿Acaso no te está faltando esto?

Código:

body, html {height:100%;}

thunder.scripts · 19-mar-2005, 17: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 · 19-mar-2005, 17:04

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

thunder.scripts · 19-mar-2005, 17: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 · 19-mar-2005, 18: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 · 19-mar-2005, 21: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 · 20-mar-2005, 05: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 · 20-mar-2005, 08: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 · 20-mar-2005, 09: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 · 20-mar-2005, 09: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. (display table y "colspan")

Gracias
Fede

19-mar-2005, 16:24	#2 (permalink)
Remo:Erdosain Fecha de Ingreso: febrero-2005 Ubicación: En un BLINK Mensajes: 184	¿Acaso no te está faltando esto? Código: body, html {height:100%;} __________________ 5.1.1. [personal + (HTML/CSS/Tech) a veces]

19-mar-2005, 17:04	#3 (permalink)
thunder.scripts Fecha de Ingreso: febrero-2005 Mensajes: 646	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 www.vmgdesign.com.ar

19-mar-2005, 17:48	#5 (permalink)
thunder.scripts Fecha de Ingreso: febrero-2005 Mensajes: 646	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 www.vmgdesign.com.ar

19-mar-2005, 21:48	#7 (permalink)
thunder.scripts Fecha de Ingreso: febrero-2005 Mensajes: 646	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 www.vmgdesign.com.ar

20-mar-2005, 08:17	#9 (permalink)
thunder.scripts Fecha de Ingreso: febrero-2005 Mensajes: 646	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 www.vmgdesign.com.ar

19-mar-2005, 17:04	#4 (permalink)
programeitor Fecha de Ingreso: febrero-2005 Mensajes: 897	Dale a #left y #right un height:100%

19-mar-2005, 18:22	#6 (permalink)
programeitor Fecha de Ingreso: febrero-2005 Mensajes: 897	#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

20-mar-2005, 05:32	#8 (permalink)
programeitor Fecha de Ingreso: febrero-2005 Mensajes: 897	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.

20-mar-2005, 09:04	#10 (permalink)
programeitor Fecha de Ingreso: febrero-2005 Mensajes: 897	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 640480 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-mar-2005 a las 09:06.*

20-mar-2005, 09:18	#11 (permalink)
thunder.scripts Fecha de Ingreso: febrero-2005 Mensajes: 646	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. (display table y "colspan") Gracias Fede __________________ Federico H. García Desarrollo Web www.federicog.com.ar www.vmgdesign.com.ar

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado