html - 填满浏览器窗口的 map 和小部件

Question

我有一个网页，其中包含 map (google)、图表和网格。他们通过 Splitters 和 TabStrips 共享屏幕。我有一个不可能的时间让他们扩展到他们可用空间的高度/宽度的 100%

一个例子胜过1000字:

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

我尝试了各种 CSS 技巧(显示布局、 block 、使用高度:100%、宽度:100%、层次结构中所有宽度/高度的显式设置。但没有任何效果。我简化了 CSS 来说明.

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

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

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

1. map 高度不是所需空间的 100%
2. 包含图表和网格的 TabStrip 未填充 100% 的高度
3. 在包含图表的 TabStrip 上有一个滚动条 和网格(我希望将其删除，因为它们应该填充空间)
4. 我想要的是 Grid 的滚动条能够正常工作(这样我就不会在 TabStrip 上有滚动条)

布局层次如下:

我。顶部 window 1.标题DIV 2.分离器 一张 map B、TabStrip 我。表DIV A。菜单 b.网格 二.图表

Answer 1

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

参见 http://jsfiddle.net/t4dzj/1/ - 这能解决问题吗？