Html 如何使谷歌地图填充在动态页眉和页脚之间的可用高度

我有一个页眉和页脚，每个页眉和页脚都有动态内容。这实际上是一个带有母版页的aspx页面，其中包含大小可能不同的页眉/页脚内容。我不能强制页眉或页脚的像素高度，因为它们可能有图像或文本等。我想让谷歌地图填充它们之间的可用页面高度（和宽度）。我会给地图画布一个最小高度，比如说200px，以防万一，否则它应该强制页脚到页面底部而不滚动（除非屏幕足够短，至少200px需要滚动）

可变高度的标题

页脚
的
变量
高度

这是一把小提琴，用flex的方法非常接近它。。。它似乎在Chrome/FireFox中工作，但在IE11中不起作用。

---

基于flex的方法最适合这种情况吗？如果是的话，让它在IE中工作我还缺少什么？还是有更好的方法来实现这一点？

我终于在IE11中实现了。它需要高度：100%在#wrapper div上。现在它可以在Chrome/Firefox/IE11/Edge上使用

height: 100%;

更新小提琴

height: 100%;