How do I make a Google Map span 100% remaining hei

Question

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

Answer 1

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.