Buenas,
El siguiente código funciona perfectamente, seguramente a alguien le ayude: hay tres divs horizontales, y al redimensionar la ventana y mediante javaScript fuerza a que el superior y el inferior tengan siempre el mismo alto, cambiando el tamaño del central sólamente y mostrando scroll cuando es necesario.
La duda que tengo es si se puede hacer esto sólo con CSS, dando un porcentaje a los divs superior e inferior, y que se adapte el central.
Gracias
Código:
<html>
<head>
<script language="javaScript">
window.onload = function() {
resize();
}
//--------------------------------------------------
window.onresize = function() {
resize();
}
//--------------------------------------------------
function resize()
{
// alto del documento, menos los altos de los otros div
alto = document.body.clientHeight - 80 - 80;
if( alto <= 0 )
alto = 10;
//alert(alto);
document.getElementById("central").style.height = alto;
}
</script>
</head>
<body style="margin:0;overflow:hidden;">
<div style="height:80px;background-color:yellow;">
<span style="font-size:9px;">SUPERIOR</span>
<input type="text" value="arriba"/>
</div>
<div id="central" style="background-color:blue;overflow:auto;">
central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>
central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>
central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>
central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>
</div>
<div style="height:80px;background-color:yellow;">
<span style="font-size:9px;">INFERIOR</span>
<input type="text" value="abajo"/>
</div>
</body>
</html>