css - 如何使 Google map 跨度为页眉和页脚之间 100% 的剩余高度？

Question

我已经在我的 wordpress 网站上设置了一个谷歌地图:

http://drummersdatabase.com/map/ (目前设置为 500 像素高度作为临时解决方法)

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

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

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

谢谢，

戴夫

Answer 1

当您要求 map 的高度为 100% 时，它不知道什么是高度的 100%。

如果您将 HTML 和 BODY 标签设置为 100% 高度，那么它就是一个起点。

然后，如果页面上只有 map 并告诉它高度为 100%，那么它确实会填充 100% 的页面高度。

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

看看 fiddle ，看看我在说什么:

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

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