Div height 100% menos pixeles

daPhyre · #1 (**permalink**) 11/05/2011, 00:39

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?

yonaida · #2 (**permalink**) 11/05/2011, 04:20

ilustra con un poco de codigo, igual asi podemos ver el sol.

conexion · #3 (**permalink**) 11/05/2011, 09:05

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>

daPhyre · #4 (**permalink**) 11/05/2011, 22:46

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

¡Excelente respuesta! Muchas gracias ;)