Las páginas HTML no se llevan bien con las necesidades de diseño en vertical, como bien sabe todo aquel que haya tratado en vano de aplicar la propiedad vertical-align: middle, una propuesta alquímica inmanejable. En esta línea de oscurantismo, para que los contenedores de una página abarquen de forma elástica el cien por cien de la altura del navegador, como en este ejemplo, hay que hacer un apaño y es definir un height 100% para el html y el body. Algo así.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Altura flexible</title>
<style type="text/css">
html, body {
height: 100%;
margin:0;
padding:0;
}
#contenedorPrincipal {
height: 100%;
padding:0;
}
#cabecera {
height:10%;
width:100%;
margin:0;
background:#900;
}
#desarrollo {
width:100%;
height:80%;
margin:0;
background:#090;
overflow-y: auto;
}
#pie {
height:10%;
width:100%;
margin:0;
background:#009;
}
</style>
</head>
<body id="js-desarrollo">
<div id="contenedorPrincipal">
<div id="cabecera"></div>
<div id="desarrollo"></div>
<div id="pie"></div>
</div>
</body>
</html>
