css - 使用css使div高度自动调整到视口(viewport)

Question

我想在表格中显示数据，当 tbody 中的数据超过 viewport 高度时应该滚动。

这是 JSFiddle:http://jsfiddle.net/91zxh69r/

我可以使用

让它滚动

{
    max-height: 200px;
    overflow: auto;
}

但这里的问题是它的高度因为 max-height: 200px 而被固定。

如何使用 css 根据 viewport 调整 tbody 的高度？有人可以帮忙吗？

谢谢

Answer 1

您可以用 div 包裹表格并将包裹的 div 拉伸(stretch)超过高度:

HTML

<div class="tableWrapper">
    <table>
        ...
    </table>
</div>

CSS:

.tableWrapper { height: 100%; overflow: auto; }