Como uso CSS para posicionar um cabeçalho de altura variável variável e uma caixa de conteúdo rolável?
Estou tentando criar uma página da web com um cabeçalho fixo e uma área de conteúdo rolável. Isso é trivial quando o cabeçalho tem uma altura conhecida, mas estou lutando para encontrar uma solução para quando o cabeçalho é fluid
O layout que eu quero é:
--------------
head
--------------
content
--------------
onde "head" é a altura que seu conteúdo precisa e "content" não tem altura mínima, mas alcançará a altura máxima da parte inferior da janela de visualização antes de se tornar rolável.
Isso é possível nos dias de hoje em CSS puro? Estou segmentando o IE8 +.
Para esclarecer o que eu quero,aqui é o que eu faria se soubesse a altura do cabeçalho:
<!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>