Foros del Web » Creando para Internet » CSS »

Div height 100% menos pixeles

Estas en el tema de Div height 100% menos pixeles en el foro de CSS en Foros del Web. Buen día compañeros del foro. Estoy con un pequeño problema que no consigo arreglar. Tengo una página con encabezado, pie de página y dos columnas, ...
  #1 (permalink)  
Antiguo 11/05/2011, 01:39
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 8 años, 9 meses
Puntos: 142
Div height 100% menos pixeles

Buen día compañeros del foro.

Estoy con un pequeño problema que no consigo arreglar. Tengo una página con encabezado, pie de página y dos columnas, que cubren el 50% de ancho de la página, el body tiene overflow:hidden; hasta el momento todo bien.

La idea es que las dos columnas ocupen todo el alto de la página, menos la altura del encabezado y pie de página (unos 30px aprox). Las tengo al 100% de altura, y cada una de ellas contiene un iframe de 100% de altura también; y aunque se ven debajo del encabezado, esos 30px se pierden debajo del pide de página, lo que me hace perder de vista unas 2 líneas más o menos.

¿Cómo podría indicar a estos dos divs que su contenido se muestre hasta donde comienza el pie de página?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #2 (permalink)  
Antiguo 11/05/2011, 05:20
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 5 años, 8 meses
Puntos: 20
Respuesta: Div height 100% menos pixeles

ilustra con un poco de codigo, igual asi podemos ver el sol.
__________________
Everybody Else It's Doing It, So Why Can't We?
  #3 (permalink)  
Antiguo 11/05/2011, 10:05
 
Fecha de Ingreso: febrero-2011
Mensajes: 54
Antigüedad: 5 años, 9 meses
Puntos: 13
Respuesta: Div height 100% menos pixeles

Creo que algo así es lo que necesitas. Funciona en todos los browsers y en todas las resoluciones:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Page</title>
<style type="text/css">
html, body {
	width: 100%; 
	height: 100%; 
	margin: 0; 
	padding: 0; 
	overflow: hidden; 
	position: relative;
}
#contenedor {
	width: 960px;
	height: 100%;
	margin: 0 auto;
	border: 1px solid #444;
}
#cabecera {
	width: 960px;
	height: 30px;
	position: relative;
	top: 0;
	background-color: #0ff;
}
#centro {
	width: 960px;
	position: absolute;
	top: 30px;
	bottom: 30px;
	overflow: hidden;
	background-color: #ccc;
}
#pie {
	width: 960px;
	height: 30px;
	position: absolute;
	bottom: 0;
	background-color: #0ff;
}
#izq {
	width: 480px;
	float: left;
	background-color: #333;
	height: 100%;
	overflow: hidden;
	color: #fff;
}
#dcho {
	width: 480px;
	float: right;
	background-color: #666;
	height: 100%;
	overflow: hidden;
}
</style>
</head>

<body id="conexion_para_fdelw">
<div id="contenedor">
	<div id="cabecera">Cabecera: Esta composición funciona en todos los navegadores y en todas las resoluciones</div>
	<div id="centro">
		<div id="izq">Aquí pones el iframe</div>	
		<div id="dcho">Aquí pones el iframe</div>
	</div>
	<div id="pie">Pie</div>
</div>
</body>

</html> 
  #4 (permalink)  
Antiguo 11/05/2011, 23:46
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 8 años, 9 meses
Puntos: 142
Respuesta: Div height 100% menos pixeles

Poner las columnas en un contenedor de posición absoluta... ¡No se me había ocurrido!

¡Excelente respuesta! Muchas gracias ;)
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Etiquetas: 100, height, menos
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 05:39.