0

我有一个包含地图（谷歌）、图表和网格的网页。他们通过拆分器和 TabStrips 共享屏幕。我有一个不可能的时间让他们扩展到他们可用空间的 100% 的高度/宽度

一个例子价值超过 1000 字：

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

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

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

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

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

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

布局层次结构如下：

I. 顶部窗口 1. 标题 DIV 2. 拆分器 A. 地图 B. TabStrip i. 表 DIV a。菜单 B. 网格二。图表

4

1 回答 1

0

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

请参阅http://jsfiddle.net/t4dzj/1/ - 这可以解决问题吗？

于 2012-06-15T20:12:40.077 回答