使用css使div高度自动调整为视口

Question

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

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

我可以使用

进行滚动

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

但问题是它的高度因max-height: 200px而得到修复。

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

由于

Answer 1

你可以用div包装表格并将包装div拉伸到高度上：

HTML

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

CSS：

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

Answer 2

为什么不使用@media设置max-height，具体取决于程序使用的屏幕大小。

@media (max-width: 699px) and (min-width: 520px) {
@viewport {
max-height: 400px;
}
}