multiple segments with variable heights CSS

Question

+---------------------------+
+ row 1: fixed height 40px  +
+---------------------------+
+ row 2: fixed height 40px  +
+---------------------------+
+                           +
+ row 3: variable height    +
+ display all user content  +
+                           +
+---------------------------+
+                           +
+ row 4: variable height,   +
+ whatever space is left.   +
+ Table scroll              +
+                           +
+---------------------------+
+ row 5: fixed height 40px  +
+---------------------------+

Can someone help me with the CSS for this? The 2 rows of variable heights is throwing me off. Also, as I understand it, with a table scroll, I need to tell it the height needed. But, if this is calculated depending on row 3, how do I do this? I've been playing with something like this (row is bootstrap grid):

CSS:

div.row1, div.row2, div.row5 {
    height: 40px;
}
div.row3 {
    /* No styling so the height can grow as needed */
}
div.row4, div.table-scroll {
    /* How do I set the height here? */
    overflow:auto;

}

HTML:

<div class="row row1">
    some content here
</div>
<div class="row row2">
    some content here
</div>
<div class="row row3">
    <div ng-repeat="blah"> Hello </div>
</div>
<div class="row row4">
    <div class="table-scroll">
        <table>
            <tr ng-repeat="blah">
                <td>text</td>
            </tr>
        </table>
    </div>
</div>
<div class="row row5">
    :w
</div>

The sum of row1-height, row2-height, row3-height, row4-height, row5-height should be 100%

Answer 1

This is not possible as of today: Make a div fill the height of the remaining screen space

You would have to use javascript to calc the side see the first answer in the link.

If you don't mind setting the size then here is a fiddle for a somewhat fixed height: Fiddle

I set the widths to:

#rowlarge {
    height: 70%;
}
#rowsmall {
    height: 30%;
}