Pequeña duda (template)

bralmu · #1 (**permalink**) 25/02/2012, 15:00

Buenas,

Me gustaría que mi página tuviese 960px de ancho y la altura de la ventana.

Luego quiero dividir la página en 2 partes: cabecera (50px de alto) y contenido.

¿cómo hago para que contenido ocupe todo el resto de la altura de la página?

Adjunto lo que tengo:

Código HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Diseñando la plantilla</title>
</head>
<body style="margin:0;">
<div style="margin:0 auto 0 auto;width:960px;height:100%;background-color:blue;">
	<div id="cabecera" style="width:960px;height:50px;background-color:red;">Cabecera</div>
	<div id="contenido" style="width:960px;background-color:green;">Contenido</div>
</div>
</body>
</html>

Si alguien visualiza la página del código, lo que quiero es que la parte "verde" siempre oculte toda la parte "azul".

Un saludo

bralmu · #2 (**permalink**) 25/02/2012, 18:03

Lo he solucionado con javascript.

Código HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Diseñando la plantilla</title>
<script>
	function ajustarAltura(){
		document.getElementById("contenido").style.setProperty("height", (document.documentElement.clientHeight-50)+"px");
	}
</script>
</head>
<body style="margin:0" onload="ajustarAltura()" onresize="ajustarAltura()">
<div style="margin:0 auto 0 auto;width:960px;background-color:blue;">
	<div id="cabecera" style="height:50px;background-color:red;">Cabecera</div>
	<div id="contenido" style="background-color:green">Contenido</div>
</div>
</body>
</html>