如何使Google地图在页眉和页脚之间保持100%的剩余高度?

时间:2012-07-28 02:37:49

标签: css wordpress google-maps height

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

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

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

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

我有什么想法可以解决这个问题吗?

谢谢,

戴夫

1 个答案:

答案 0 :(得分:1)

当你要求你的地图高度为100%时,它不知道100%的高度是什么。

如果您将HTML和BODY标记设置为高度100%,则为您提供起点。

然后,如果你只有页面上的地图并告诉它高度为100%那么它确实会填满页面高度的100%。

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

看看小提琴,看看我在说什么:

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

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