Coincidiendo con Mikmoro en la falta de precisión y antes de que rayden12345 precisara más (y viendo su primera petición) hice este acercamiento a una estructura que mantiene fija la cabecera y la base y flota el contenido en altura (en el hueco libre que dejan la cabecera y la base) pero con tamaño fijo en altura.
Funciona correctamente en muchos browsers y no le afecta la resolución de pantalla, pero al tener el cuerpo central un tamaño fijo en altura, sólo queda optimizado para una resolución de 1024x768 y sus cercanas, p.e. 1280x800, aunque el centrado flota perfectamente en cualquier resolución.
Quizás pueda valer como punto de partida y, si alguien aporta ajustes que permitan la adaptación a porcentajes, mejor que mejor.
Saludos
Código 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>Cabecera, base y cuerpo central centrado en el ancho y en el alto</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#conjunto {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#cabecera {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px; /*si se cambia este valor se debe cambiar también el valor de 2 - mirar en portacuerpo*/
background-color: blue;
}
#base {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
background-color: purple;
z-index: 101;
}
#portacuerpo {
position: relative;
top: 100px; /* valor 2: cambiarlo por el mismo valor que el height de cabecera*/
width: 100%;
height: 100%;
overflow: hidden;
background-color: yellow;
}
#cuerpo {
position: absolute;
width: 780px;
height: 340px;
margin-left: -390px;
margin-top: -270px; /*este valor debe ser siempre la mitad que su height (en este caso es 340px) + el valor del height de la cabecera (en este ejemplo es 100px) = la mitad de 340 es 170 y se le suma 100 de la altura de la cabecera, total: 270px */
top: 50%;
left: 50%;
background-color: red;
overflow: auto;
z-index: 100;
}
.texto {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
line-height: 100px;
}
.texto2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
}
</style>
</head>
<body>
<div id="conjunto">
<div id="cabecera" class="texto2">Contenido de la cabecera<br /><br />Estructura con cabecera y base siempre fijas en pantalla y contenido en un cuerpo central que siempre flota centrándose en el ancho y en la altura libre que hay entre la cabecera y la base, independientemente de la resolución del monitor.<br />Probado en ie6, ie7, ie8, ff 2.0.018 y 3.0.5, opera 9.64 y chrome 4.154. Y en pantallas de 1024x768, 1280x1024 y 1280x800 píxeles. Optimizado para 1024x768.</div>
<div id="portacuerpo">
<div id="cuerpo" class="texto">Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br /></div>
</div>
<div id="base" class="texto">Contenido de la base</div>
</div>
</body>
</html>