None of the solutions posted work when you need the bottom div to scroll when the content is too tall. Here's a solution that works in that case:
.table {_x000D_
display: table;_x000D_
}_x000D_
_x000D_
.table-row {_x000D_
display: table-row;_x000D_
}_x000D_
_x000D_
.table-cell {_x000D_
display: table-cell;_x000D_
}_x000D_
_x000D_
.container {_x000D_
width: 400px;_x000D_
height: 300px;_x000D_
}_x000D_
_x000D_
.header {_x000D_
background: cyan;_x000D_
}_x000D_
_x000D_
.body {_x000D_
background: yellow;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.body-content-outer-wrapper {_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.body-content-inner-wrapper {_x000D_
height: 100%;_x000D_
position: relative;_x000D_
overflow: auto;_x000D_
}_x000D_
_x000D_
.body-content {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
bottom: 0;_x000D_
left: 0;_x000D_
right: 0;_x000D_
}
_x000D_
<div class="table container">_x000D_
<div class="table-row header">_x000D_
<div>This is the header whose height is unknown</div>_x000D_
<div>This is the header whose height is unknown</div>_x000D_
<div>This is the header whose height is unknown</div>_x000D_
</div>_x000D_
<div class="table-row body">_x000D_
<div class="table-cell body-content-outer-wrapper">_x000D_
<div class="body-content-inner-wrapper">_x000D_
<div class="body-content">_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
<div>This is the scrollable content whose height is unknown</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
Original source: Filling the Remaining Height of a Container While Handling Overflow in CSS