Google Maps with height=100% and margin top

831 views Asked by At

I'm coding a wordpress plugin that should display a fullscreen google map. If you are logged in in WordPress, a Toolbar is displayed at the top using margin-top. Google Maps apparently needs a div with height=100% to display a fullscreen map, but if you are logged in and the admin toolbar of wordpress is displayed, I have unnecessary scrollbars. Absolute positioning is not possible because of a floating sidebar and mobile support.

All the solutions for the "100% with margin" problems either use absolute positioning or "min-height", which is not working for google maps. Anyone has a solution for me?

1

There are 1 answers

0
Joel Almeida On BEST ANSWER

If you want it full height of the viewport just do 100vh.

So we remove the size of the bar.

height: calc(100vh - 100px)