如何使可滚动的表格主体占据可用的屏幕高度

Question

我有一个页面，由页眉、页脚和带有可滚动正文的表格组成。

我试图让所有内容恰好占据 100vh，如果包含许多行来容纳，则表体可以滚动。

到目前为止，我有这个 jsfiddle，但我正在定义表体的高度，我想避免：

我可以仅使用 CSS 根据可用的剩余空间调整表格主体的大小吗？我不想使用flexbox，但如果 flexbox 似乎是最好的方法，我可以使用后备。

[编辑] 我需要支持 IE10，所以我不能按照下面几个其他很好的答案中的建议使用 calc。

我觉得这应该很容易，但我很挠头。

Answer 1

使用calc()css中的函数来有效计算，height从而调整页脚和页眉以及表格高度。

tbody {
  display: block;
  width: 100%;
  height: calc( 100vh - 200px );
  overflow-y: scroll;
}