A more modern approach would be to use the grid property.
section {_x000D_
display: grid;_x000D_
align-items: stretch;_x000D_
height: 300px;_x000D_
grid-template-rows: min-content auto 60px;_x000D_
}_x000D_
header {_x000D_
background: tomato;_x000D_
}_x000D_
div {_x000D_
background: gold;_x000D_
overflow: auto;_x000D_
}_x000D_
footer {_x000D_
background: lightgreen;_x000D_
}
_x000D_
<section>_x000D_
<header>_x000D_
header: sized to content_x000D_
<br>(but is it really?)_x000D_
</header>_x000D_
<div>_x000D_
main content: fills remaining space<br>_x000D_
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>_x000D_
_x000D_
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>_x000D_
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>_x000D_
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>_x000D_
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>_x000D_
_x000D_
</div>_x000D_
<footer>_x000D_
footer: fixed height in px_x000D_
</footer>_x000D_
</section>
_x000D_