Hola. Llevo para seros sinceros mas de 1 dia haciendo pruebas, mirando por el foro, copiando codigo y probandolo y en otras webs y no encuentro la solucion a esto en concreto que quiero hacer.
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: <!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>
Espero me podeis ayudar ya que estoy ya que no se que hacer.
Saludos y gracias.