Html 固定高度作为剩余空间函数的纯CSS解决方案

我有一个页面，其中包含一个标题和其他三个不相关内容的div，如下所示

+-----------+
|   header  |
+-----------+
|  1  |  2  |
+-----+-----+
|     3     |
+-----------+

我需要的是表格占用页面上的剩余空间，但不能超出视口（页面上不应有垂直滚动条）

---

换句话说，1、2和3的高度应该正好是剩余空间的50%（在页眉之后）。没有JS，也没有固定页眉高度，我怎么能做到这一点呢？

可以使用CSS表和许多嵌套的

div

元素来实现

body，html{
保证金：0；
身高：100%；
}
.包装纸{
身高：100%；
背景颜色：棕褐色；
显示：表格；
宽度：100%；/*可选，取决于布局*/
}
.标题行{
显示：表格行；
}
.标题行img{
显示：块；
宽度：100%；
}
.内容行{
身高：100%；
显示：表格行；
}
.内容行{
边框：1px点蓝色；
框大小：边框框；
身高：100%；
显示：表格单元格；
}
.内容{
显示：表格；
宽度：100%；
身高：100%；
}
.行{
显示：表格行；
}
.行.单元格{
显示：表格单元格；
身高：50%；
宽度：100%；
边框：1px点蓝色；
}
.行，分开{
宽度：50%；
身高：100%；
浮动：左；
边框：1px点蓝色；
框大小：边框框；
}

分裂
分裂
东西

不错！经过进一步研究，box和flex模型也是可选的，但表解决方案具有最好的浏览器支持。感谢