地图＆amp;填充浏览器窗口的小部件

Question

我有一个网页，其中包含地图（谷歌），图表和网格。他们通过Splitters和TabStrips共享屏幕。我有一个不可能的时间使他们扩展到他们可用的空间的高度/宽度的100％

一个例子值超过1,000字：

我创建了一个显示问题的精简JsFiddle： http://jsfiddle.net/drysg/Rh7cL/ 完整浏览器版本：http://jsfiddle.net/drysg/Rh7cL/embedded/result/

我尝试了各种各样的CSS技巧（显示布局，块，使用高度：100％，宽度：100％，层次结构中所有宽度/高度的显式设置。但没有任何工作。我简化了CSS来说明

我正在寻找一个纯CSS解决方案：

1. 展开网格，图表和地图以便在开始时填充屏幕
2. 浏览器调整大小将动态调整网格，地图和图表的大小 （它们会像任何好的WPF或Silverlight应用程序一样缩小到可用空间！
3. 如果需要，我会容忍一个响应窗口大小调整事件的JQuery方法。

如果你仔细观察，你会发现实际上有4个问题：

1. 地图高度不是所需空间的100％
2. 包含图表＆amp; amp;的TabStrip网格没有填充100％的高度
3. TabStrip上有一个用于保存图表的滚动条  和网格（我希望删除它，因为它们应该填充空间）
4. 我想要的是Grid工作的滚动条（这样我就不会在TabStrip上有滚动条）

布局层次结构如下：

予。顶部窗户     1.标题DIV     2.拆分器         一张地图         B. TabStrip             一世。表DIV                 一个。菜单                 湾格             II。图表

Answer 1

将BODY和HTML元素都设置为{ height:100%; overflow: hidden}，然后将评论的DIV高度规则恢复为100％;

请参阅http://jsfiddle.net/t4dzj/1/ - 是否会照顾它？