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%;
}

具有可变高度CSS的多个段

1 个答案: