css - 有什么可靠的跨浏览器方法可以在多个 DIV 之间分配父元素中的剩余空间？

Question

背景

我正在开发一个基于浏览器的 UI，它需要在没有任何滚动的情况下填满整个屏幕。基本布局是这样的:

我想要实现的目标

标题div应该有一个固定的高度(2em)，其余4个div/panels应该按照我设置的百分比划分屏幕的剩余空间。

我尝试过的

我找到的最佳解决方案是“CSS - How to force elements to 100% of remaining/available space of parent element without extending beyond it?”，它涉及使用带有 position:absolute 的容器 div。这适用于所有浏览器，但需要创建一些额外的 DIV。此外，由于 inaccuracies in percentage widths，面板 2 有时会被迫从下一行开始。 .

我之前的解决方案是基于 CSS3 Flexbox ，但该模型存在缺陷，因为它不会在拉伸(stretch)容器框后调整具有百分比高度的子元素的大小(至少 Chrome 不会)。 (较新的 flex-* 属性仅在 Chrome 中实现，标准仍在变化。)

我也试过 calc()功能;但是，它尚未在 Chrome 中实现。此外，它需要在两个地方对标题元素的高度进行硬编码，而我一直在努力避免这种情况。

编辑:

我在找什么

需要说明的是，我并不是要一个完美/纯 CSS 的解决方案(因为似乎不存在)。如果有人可以推荐任何可以执行此操作的 jQuery 插件或开源框架，那对我来说就足够了。

此外，我不要求与 2012 年之前的浏览器版本有任何向后兼容性。(只要该解决方案使用的技术已在某些浏览器中实现，并且在不久的将来将由 Firefox 和 Chrome 实现，它是对我来说已经足够好了。)

Answer 1

一些东西拼凑在一起: http://jsfiddle.net/gDTGn/2/