为什么我的 Google 地图容器未以 100% 宽度和高度显示？

如何将 Google 地图容器 DIV 宽度和高度设置为 100%

加载 Google 地图 API v3 并尝试在 div 中显示它时，您可能会遇到尽管将宽度和高度都设置为 100%，但地图仍不可见的情况。您提供的 HTML 代码如下：

<code class="html"><!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;">...</div></code>

要解决此问题，确保 Google 地图容器 div 的所有父容器的宽度设置为 100% 至关重要。此外，包含 Google 地图容器的 #content div 必须将其宽度和高度显式设置为绝对值。

以下是解决此问题的更新的 CSS 代码片段：

<code class="css">body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; /* Set absolute width here */
  height: 100%; /* Set absolute height here */
}</code>

通过进行这些更改，您将能够将 Google 地图容器 DIV 的宽度和高度设置为 100%，并使其按预期覆盖整个页面。

以上是为什么我的 Google 地图容器未以 100% 宽度和高度显示？的详细内容。更多信息请关注PHP中文网其他相关文章！