La web que estoy diseñando tiene una cabecera que la llamo capa superior. Y dos capas debajo de esta en la izquierda es para el contenido y en la derecha para el menu. Las dos capas quiero que tengan la misma altura pero que se adapten al 100% de la ventana para que no aparezca la barra de desplazamiento vertical.
Se como hacer que las capas ocupen el 100% en altura en vertical pero si coloco la capa superior, los pixeles de altura de esta capa me los suma al total del 100% inicial y por lo tanto me aparece el scroll vertical.
Para que lo podais ver os lo pongo aqui. (incluso he probado con un contenedor para ver si lo respetaba pero nada).
Cita:
Espero me podeis ayudar ya que estoy ya que no se que hacer.<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css" media="screen">
{margin:0; padding:0;}
html,body {margin:0px;font-size: 11px;height:100%;}
#contenedor{height:100%; background-color:#00FFFF;}
#cabecera{background-color:#000000; height: 80px;}
#derecha{background-color:#CCCCCC; height: 100%; width: 200px; float:left}
#izquierda{background-color: #0099FF; height: 100%; width: 200px; float:right}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera"></div>
<div id="izquierda"></div>
<div id="derecha"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css" media="screen">
{margin:0; padding:0;}
html,body {margin:0px;font-size: 11px;height:100%;}
#contenedor{height:100%; background-color:#00FFFF;}
#cabecera{background-color:#000000; height: 80px;}
#derecha{background-color:#CCCCCC; height: 100%; width: 200px; float:left}
#izquierda{background-color: #0099FF; height: 100%; width: 200px; float:right}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera"></div>
<div id="izquierda"></div>
<div id="derecha"></div>
</div>
</body>
</html>
Saludos y gracias.
