谷歌地图设置高度答案

【问题标题】：Setting height of google map谷歌地图设置高度
【发布时间】：2016-05-06 11:44:00
【问题描述】：

我正在尝试将我的谷歌地图的宽度和高度设置为 100%。我知道您也需要设置父母，我正在这样做。这就是我所拥有的：

<asp:Content ID="head" ContentPlaceHolderID="head" runat="server">
<style>
    #homeBody {
        height: 100%;
        width: 100%;
    }

    #map {
        width: 100%;
        height: 100%;
        margin-top: 200px;
    }
</style>
</asp:Content>

<asp:Content ID="homeBody" ContentPlaceHolderID="homeBody" runat="server">
    <div id="map"></div>

//some scriping to build map and what not
</asp:Content>

谁能告诉我我做错了什么？我目前在页面上只有一条非常细的线......基本上没有高度，只有宽度。

【问题讨论】：

请提供一个 Minimal, Complete, Tested and Readable example 来证明问题（最好是浏览器看到的 HTML/CSS）..

标签： css google-maps height

【解决方案1】：

附加标记会有所帮助。

如果#homeBody 是另一个没有设置高度的元素的子元素，那么height: 100%; 也不起作用。如果您继续对父元素使用百分比高度，那么这些元素也需要在其父元素上设置高度。如果您只有百分比高度，那么链需要一直持续到 <html> 标记。

基本上，浏览器正在做的是试图找出 100% 的百分比。一旦到达<html>，它就可以使用视口作为它的父元素，该元素将定义一个特定的高度。

【讨论】：

我明白了。从字面上看，这就是所有标记减去地图部分的脚本

【解决方案2】：

你是对的，父母必须有一个高度才能让你的地图占据同一个地方。如果你想要 100% 的高度，你可以看看这个：Set Google Maps Container DIV width and height 100%

【讨论】：