¿Cómo uso CSS para colocar un encabezado de altura variable y un cuadro de contenido desplazable?
Estoy intentando crear una página web con un encabezado fijo y un área de contenido desplazable. Esto es trivial cuando el encabezado tiene una altura conocida, pero estoy luchando por encontrar una solución para cuando el encabezado es fluido.
El diseño que quiero es:
--------------
head
--------------
content
--------------
where "head" es la altura que necesita su contenido y el "contenido" no tiene una altura mínima, pero alcanzará una altura máxima de la parte inferior de la ventana gráfica antes de desplazarse.
¿Es esto posible en estos días en CSS puro? Estoy apuntando a IE8 +.
Para aclarar lo que quiero, aquí está lo que haría si supiera la altura del encabezado:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
#head {
background: yellow;
height: 20px; /* I can't rely on knowing this. */
}
#content {
background: red;
position: absolute;
top: 20px; /* here also */
bottom: 0;
width: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="head">some variable height content</div>
<div id="content">
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
</div>
</body>
</html>