如何使谷歌地图在页眉和页脚之间跨越 100% 的剩余高度？

【问题标题】：How do I make a Google Map span 100% remaining height between header and footer?如何使谷歌地图在页眉和页脚之间跨越 100% 的剩余高度？
【发布时间】：2012-07-28 02:37:48
【问题描述】：

我在我的 wordpress 网站上设置了谷歌地图：

http://drummersdatabase.com/map/（目前设置为 500px 高度作为临时解决方法）

我已经设法让地图跨越 100% 的宽度，而不是剩余的高度。无论用户的分辨率如何，我基本上都想确保没有滚动条。

当我设置地图高度和/或它包含 div css (class="gridfull") 100%;它似乎将其解释为 100px。

有什么办法可以解决这个问题吗？

谢谢，

戴夫

【问题讨论】：

您能否在问题中包含您的 html 和 css？

标签： css wordpress google-maps height

【解决方案1】：

当您要求地图高度为 100% 时，它不知道高度为 100%。

如果您将 HTML 和 BODY 标记设置为 100% 的高度，这将为您提供一个起点。

那么如果你只在页面上有地图并告诉它是高度 100% 那么它确实会填充页面高度的 100%。

但是，您有一个页眉和一个页脚，它们也占用空间，所以为了做您想做的事情，您还必须将页眉和页脚设置为基于百分比的高度。

看看小提琴，看看我在说什么：

http://fiddle.jshell.net/Mm3TT/

我能想到的唯一另一种方法是使用 javascript 计算用户浏览器的高度，然后从中减去页眉和页脚的高度，并将地图的高度设置为剩下的高度。

【讨论】：