How do you set Google map to full screen? CSS code with width: 100% and height: 100% breaks the map.

[Daniel6480935]

I added a Google map to my page and I added this class to my CSS file:

.map
{
width: 100% !important;
height: 100% !important;
}

It prevents the map from load at all for some reason, how can I set the map to fill the screen on all devices? I use tabs too and want them to overlay at the bottom, same with header. Thanks

[Illya Stepanov]

Hi Daniel,

Please check this topic :: https://getsatisfaction.com/apperyio/...

[Daniel6480935]

thanks I can see the map trying to fill the screen, but creates a vertical scroll bar because of my header and tab menu at the bottom, is there a way to put the map behind these elements to avoid the scroll bar?

[Maryna Brodina]

Hello! Most likely you see scroll because of map margins. Please set them to 0.

[Daniel6480935]

It is actually the search bar I added below the header that creates the scroll, is there a way to subtract the height of the searchbar from the height, the header doesn't seem to cause an issue with the map height?

[Kateryna Grynko]

Hi Daniel,

To return component height:preAppery("component ").height()/preWhere 'component' is a component name.