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?
If you want it full height of the viewport just do 100vh.
So we remove the size of the bar.
height: calc(100vh - 100px)