是否有可靠的跨浏览器方式在几个DIV之间分配父元素中的剩余空间？
背景
我正在开发一个基于浏览器的UI,需要在没有任何滚动的情况下填满整个屏幕.基本布局是这样的:
我想要实现的目标
标题div应具有固定高度(2em),其余4个div/panel应根据我设置的百分比分配屏幕的剩余空间.
我试过的
我发现的最好的解决方案是" CSS - 如何强制元素占父元素剩余/可用空间的100%而不超出它？ ",这涉及到使用容器div position:absolute.这适用于所有浏览器,但需要创建一些额外的DIV.此外,由于百分比宽度的不准确,有时可能会迫使面板2在下一行开始.
我之前的解决方案基于CSS3 Flexbox,但该模型存在缺陷,因为在拉伸容器盒之后它不会调整具有百分比高度的子元素(至少Chrome不会).(较新的flex-*属性仅在Chrome中实现,标准仍在变化.)
我也尝试了calc()函数; 但是,它还没有在Chrome中实现.此外,它需要在两个地方硬编码标题元素的高度,我一直试图避免.
编辑:
我在找什么
为了清楚起见,我不是要求一个完美的/纯CSS解决方案(因为似乎没有).如果有人可以建议任何可以做到这一点的jQuery插件或开源框架,那对我来说就足够了.
此外,我不要求在2012年之前向浏览器版本提供任何向后兼容性.(只要解决方案使用的技术在某些浏览器中实现,并且将在不久的将来由Firefox和Chrome实现,它就足够了我.)