CODEWITHSUNDEEP
javascripthtmlcss
Tabrock
Tabrock

Reputation: 1169

Map Doesn't Load when I try to set the height dynamic

When I load the map on my page, it loads fine with this code:

<div id="googleMap" style="width: calc(100% - 2px); height: 800px;"></div>

However, when I try to load it this way, it won't load and I don't understand why.

<div id="googleMap" style="width: calc(100% - 2px); height: calc(100% - 2px);"></div>

Can anyone explain why this isn't loading? Are they're any recommended alternatives so I can get the height of the map to dynamically fit my div? It doesn't necessarily need to have two pixels of room. Thanks!

Upvotes: 1

Views: 133

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241138

When you set a percentage based height, the parent's height also needs to be defined. A height of calc(100% - 2px) is equal to 0 if the parent's height is 0. Given that this worked with a fixed px based height, you simply need to set the parent's height in order for it to work.

Assuming that the direct parent's height is defined with a percentage based value, use the following:

html, body { height:100%; }

Here is an example demonstrating this.

Alternatively, if the element is wrapped with another element, use a fixed px based height. (example)

Upvotes: 1

user3155561
user3155561

Reputation:

try giving it a min-height, I don't think the map will render if it doesn't have a height.

#googleMap
{
  min-height:10px;
}

Upvotes: 0

Related Questions