问题
I have some problem with adding Google Maps to my project. When i get it into body tags it works. But when I have structure like this
<body onload="initialize()">
<div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
</body>
it doesn't show anything. How I can solve this problem?
回答1:
It is because height: 100%; is always relative to the parent's height. In your case, this is the nameless div, which has zero height, so #map_canvas will be the 100% of that, which is still zero. So the Google Maps won't show because the div has no visible height.
If you specifiy 100% on the parent div, it will work again. I guess you already have html, body { height: 100%; } if it works being simply in the body tag.
jsFiddle Demo
回答2:
Do you have html, body also at 100%?
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
来源：https://stackoverflow.com/questions/10156637/google-maps-css-dont-show-map