如何让Google地图在页眉和页脚之间保持100％的高度？ [英] How do I make a Google Map span 100% remaining height between header and footer?

问题描述

我在这里的wordpress网站上建立了google地图： http://drummersdatabase.com/map/ （目前设置为500px高度作为临时解决方法）

我设法获得地图跨越100％的宽度，但不是剩余的高度。

当我设置地图高度和/或其包含div css（class =gridfull）时， ）100％;它似乎解释为100px而不是。

任何想法如何我可以解决这个问题？

谢谢，

Dave

解决方案

当你要求你的地图是高度100％它不知道什么是身高的100％。

如果您将HTML和BODY标签设置为高度100％，那么您可以从中获得一个出发点。

然后，如果您只有页面上的地图并将其告知高度为100％，那么它确实会填充页面高度的100％。

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

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

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

我能想到的唯一方法就是使用它javascript来计算用户浏览器的高度，然后减去页眉和页脚的高度，并将地图的高度设置为任何剩余的高度。

I have set up a google map on my wordpress site here:

http://drummersdatabase.com/map/ (currently set to 500px height as a temp workaround)

I have managed to get the map to span 100% of the width but not the remaining height. I basically want to make sure there are no scrollbars regardless of the user's resolution.

When I set the map height and/or it's containing div css (class="gridfull") 100%; it seems to interpret this as 100px instead.

Any ideas how I can fix this?

Thanks,

Dave

解决方案

WHen you're asking your map to be height 100% it doesn't know what to be height 100% of.

If you set your HTML and BODY tags to be height 100% that gives you a starting point.

Then if you only had the map on the page and told it to be height 100% then it would indeed fill 100% of the height of the page.

However you have a header and a footer which also take up space so in order to do what you want to do you'd have to set the header and the footer to be percentage based heights too.

Have a look at the fiddle to see what I'm talking about:

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

The only other way I can think to do it would be using javascript to work out the height of the users browser then subtracting the height of the header and footer from that and setting the height of the map to be whatever is left.

这篇关于如何让Google地图在页眉和页脚之间保持100％的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！