我有一个由页眉，页脚和带可滚动主体的表格组成的页面。
我正在努力让所有内容完全占用100vh，如果包含很多行以适应，则表体可以滚动。
到目前为止，我有这个jsfiddle，但我正在定义表体的高度，我想避免：
https://jsfiddle.net/134asedk/3/
我是否可以根据仅使用CSS的可用剩余空间来调整表体的大小？我不想使用flexbox，但如果flexbox似乎是最好的方法，我可以使用后备。
[edit]我需要支持IE10，所以我不能在下面的几个很好的答案中使用calc。
我觉得这应该很容易，但我正在摸不着头脑。
答案 0 :(得分：1)
您无法通过css获得fullbody元素的响应高度，您只能找到错误的解决方法。
但如果你愿意，你可以通过javascript获取窗口宽度和窗口高度并将它们设置在你的桌子上！
为了尽可能提高响应速度，您可以在窗口调整大小上执行此操作^^
答案 1 :(得分：1)
在css中使用calc()函数有效地计算height，以便调整页脚和页眉以及表格高度。
tbody {
display: block;
width: 100%;
height: calc( 100vh - 200px );
overflow-y: scroll;
}
以下是jsFiddle
答案 2 :(得分：1)
在height: calc(100% - 140px); overflow-y: scroll;上使用.table-wrapper。 140px是.header-wrapper和.footer-wrapper
* {
padding: 0;
margin: 0;
}
.main-wrapper {
height: 100vh;
overflow: hidden;
}
.header-wrapper, .footer-wrapper {
padding: 10px 5px;
height: 50px;
}
table {
width: 100%;
}
tr {
width: 100%;
display: table;
table-layout: fixed;
}
th, td {
width: 33%;
padding: 5px;
text-aligh: left;
}
span {
float: left;
}
/*tbody {
display: block;
width: 100%;
height: 300px;
overflow-y: scroll;
}*/
.table-wrapper {
height: calc(100% - 100px);
overflow-y: scroll;
}<div class="main-wrapper">
<div class="header-wrapper">
<h1>The Header</h1>
</div>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>
<span>Table Head1</span>
</th>
<th>
<span>Table Head 2</span>
</th>
<th>
<span>Table Head 3</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
<tr>
<td>
<span>Cell 1</span>
</td>
<td>
<span>Cell 2</span>
</td>
<td>
<span>Cell 3</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer-wrapper">
<h1>The footer</h1>
</div>
</div>