具有可变高度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  +
+---------------------------+

有人可以帮我解决这个问题吗？两排可变高度让我失望。另外，据我了解，使用表格滚动条，我需要告诉它所需的高度。但是，如果这是根据第 3 行计算的，我该怎么做？我一直在玩这样的东西（行是引导网格）：

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>

row1-height、row2-height、row3-height、row4-height、row5-height之和应该是100%

Answer 1

这在今天是不可能的： Make a div fill the height of the remaining screen space

您将不得不使用 javascript 来计算侧面，请参阅链接中的第一个答案。

如果您不介意设置大小，那么这里有一个固定高度的小提琴：Fiddle

我将宽度设置为：

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