Hola.
Finalmente lo pude solucionar.
La solución la encontré aquí:
http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/Es Javascript, pero tiene mucha relación con el CSS.
Pongo el código completo, con HTML, Javascript y CSS para quien pudiera requerirlo.
Ha sido probado con IE7, FF2 y safari 3 para PC, en Windows Vista.
Si alguien pudiera probarlo en otros navegadores/plataformas y reportar errores, sería genial.
Con esto se logra un diseño de tipo:
CABECERA
--------------
CONTENIDO
--------------
PIE DE PAG
Donde contenido tiene una columna con anchura fija y tan alta como sea el espacio disponible entre cabecera y pie de pag.
[html]<!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">
<!--
html, body {
margin:0;
padding:0;
height:100%;
}
#lienzo {
margin: auto;
padding: 0px;
height: 100%;
width: 950px;
background-color:#999;
}
#lienzo #cabecera {
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
color:#FFFFFF;
background-color:#333333;
}
#lienzo #contenidoTexto {
width:400px;
background-color:#ccc;
position:absolute;
top:100px;
overflow:auto;
}
#lienzo #piedepagina {
position:absolute;
bottom:0;
left:0;
width:100%;
height:80px;
color:#FFFFFF;
background-color:#333333;
}
h1, p {
margin:0;
}
-->
</style>
<script type="text/ecmascript" language="javascript">
<!--
function resize(){
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth;
viewportheight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
viewportwidth = document.documentElement.clientWidth;
viewportheight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
viewportheight = document.getElementsByTagName('body')[0].clientHeight;
}
// A la altura total se le resta 180px (100 de la cabecera y 80 del pie de página
document.getElementById("contenidoTexto").style.height=viewportheight-180+"px";
}
window.onload=resize;
window.onresize=resize;
-->
</script>
</head>
<body>
<div id="lienzo">
<div id="cabecera">Esta es la cabecera</div>
<div id="contenidoTexto">
<h1>Es un encabezado de nivel uno, pero que ancla o define a H1#contenidoTitulo</h1>
<h2>Este es un encabezado de nivel dos, que debe ampliar un poco más la información sobre la sección</h2>
<p>Duis aute irure dolor sed do eiusmod tempor incididunt quis nostrud exercitation. Ullamco laboris nisi sunt in culpa ut aliquip ex ea commodo consequat. Cupidatat non proident, excepteur sint occaecat in reprehenderit in voluptate. Mollit anim id est laborum.</p>
<h3>Encabezado de nivel tres: </h3>
<ul>
<li>Duis aute irure dolor velit esse cillum dolore consectetur adipisicing elit. </li>
<li>Ut aliquip ex ea commodo consequat. </li>
<li>In reprehenderit in voluptate.</li>
</ul>
<p class="colorNombrecolor">Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi in reprehenderit in voluptate velit esse cillum dolore.</p>
<h1>Es un encabezado de nivel uno, pero que ancla o define a H1#contenidoTitulo</h1>
<h2>Este es un encabezado de nivel dos, que debe ampliar un poco más la información sobre la sección</h2>
<p>Duis aute irure dolor sed do eiusmod tempor incididunt quis nostrud exercitation. Ullamco laboris nisi sunt in culpa ut aliquip ex ea commodo consequat. Cupidatat non proident, excepteur sint occaecat in reprehenderit in voluptate. Mollit anim id est laborum.</p>
<h3>Encabezado de nivel tres: </h3>
<ul>
<li>Duis aute irure dolor velit esse cillum dolore consectetur adipisicing elit. </li>
<li>Ut aliquip ex ea commodo consequat. </li>
<li>In reprehenderit in voluptate.</li>
</ul>
<p class="colorNombrecolor">Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi in reprehenderit in voluptate velit esse cillum dolore.</p>
</div>
<div id="piedepagina">Este es el pie de página</div>
</div>
</body>
</html>[/html]Saludos, y espero que les sea útil.
