Javascript CSS将div高度自动调整为两个div之间的可用空间

我希望我的表格（class=“body”）的高度能够自动适应页眉div和页脚div之间的剩余空间。这些树div被包装在一个div中，其位置固定并在屏幕上居中。

---

更新：

或

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@导入url（'https://fonts.googleapis.com/css?family=Open+Sans:300300i、400400i、600600i、700700i、800800i&子集=希腊文、拉丁文ext'）；
.dp集装箱{
位置：固定；
字体大小：16px；
字号：600；
背景色：#EEE；
颜色：#333；
边界半径：5px；
填充：3倍；
文本对齐：居中；
线高：1.2；
z指数：50；
字体系列：“开放式Sans”、“proxima nova”、Helvetica、Sans serif；
保证金：自动；
最小宽度：256px；
最大宽度：666px；
宽度：100%；
最高高度：80%；
高度：434px；
文本转换：大写；
排名：0；
底部：0；
左：0；
右：0；
}
.dp标题{
位置：相对位置；
页边顶部：自动；
页边距底部：自动；
边缘顶部：.75em；
线高：1.5；
游标：默认值；
}
.dp机构{
/*高度：自动*/
/*宽度：100%*/
}
.dp页脚{
位置：绝对位置；
左：15px；
右：15px；
填充：0；
底部：1米；
}
.dp容器a{
颜色：#333；
文字装饰：无；
}
.dp容器a：悬停{
颜色：#0089ec；
}
/*.dp容器>*{*/
/*边缘顶部：7px*/
/*}*/
.dp集装箱*{
文本对齐：居中；
}
.dp标题{
显示：内联块；
宽度：60%；
字距：5px；
字体大小：1.2米；
光标：指针；
}
.dp月份：悬停{
颜色：#0089ec；
}
.dp月{
字号：600；
光标：指针；
}
.dp标题.dp年份{
颜色：#888；
字体大小：400；
}
.dp向左箭头，.dp向右箭头{
位置：绝对位置；
显示：内联块；
顶部：-0.2米；
填充：0.3em；
光标：指针；
}
.dp向右箭头{
右：.2em；
}
.dp向左箭头{
左：2米；
}
.dp表格tbody>tr{
身高：30%；
}
.dp表格{
边缘：.75em0；
身高：100%；
}
.dp table>tbody>tr>td、.dp table>tbody>tr>th、.dp table>tfoot>tr>td、.dp table>tfoot>tr>th、.dp table>thead>tr>td、.dp table>thead>tr>th
{
边界：无；
垂直对齐：中间对齐；
填充：0；
}
.dp表td：悬停{
背景色：#b1dcfb；
}
.dp表格tr{
保证金：0自动；
填充：0；
}
.dp表tr>*{
光标：指针；
}
.dp表th{
颜色：#888；
字体大小：400；
字体大小：.75em；
宽度：12.5%；
}
.dp表td>div{
位置：相对位置；
显示：块；
}
.dp表td>div，.dp表th>div{
填充：.6250；
}
.dp表td.今天>*：之前{
内容：“；
位置：绝对位置；
顶部：2个；
右：2px；
宽度：0；
身高：0；
边框顶部：0.5em实心#0059bc；
左边框：.5em实心透明；
}
.dp表td[已禁用]{
颜色：#BBB；
}
.dp表thead th{
垫底：25em；
}
.dp表tbody th{
右侧填充：.25em；
}
.dp表td：悬停{
背景色：#b1dcfb；
}
.dp表tr>*。已选择{
背景：#0089ec；
颜色：#EEE；
}
.dp页脚按钮.dp-btn{
宽度：33%；
保证金：0-1px；
填充：.66em0；
垂直对齐：底部对齐；
显示：内联块；
边界：无；
背景色：透明；
字体大小：粗体；
字号：1em；
}
.dp页脚按钮.dp btn:悬停{
背景色：#b1dcfb；
}
.dp-table.dp-months-table{
字体大小：20px；
}
.dp-table.dp-months-table tr>*{
填充：1.2米0；
背景重复：无重复；
背景来源：边框框；
背景尺寸：封面；
字体大小：粗体；
颜色：#202020；
文本阴影：0 0 20px rgba（84184242,0.91），1px 1px 6px rgba（223223223,0.91），-1px-1px 6px rgba（223223223,0.91）；
}
.dp-table.dp-months-table tr>*：悬停{
颜色：#0089ec；
}

调整窗口大小以查看问题（较小）
2017年6月
一月
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
太阳
周一
星期二
结婚
清华大学
星期五
坐
8.
28
29
30
31
1.
2.
3.
9
4.
5.
6.
7.
8.
9
10
10
11
12
13
14
15
<input type="date">