Html 谷歌地图未显示在div中

我有一个谷歌地图div，它显示了我定义高度的像素，而不是百分比；在我的示例中，我尝试将高度设置为100%

我已经阅读了一些SOF答案，这些答案建议还必须设置父div高度，正如您所看到的，我通过在css中定位地图的所有父div来设置父div高度，但是地图没有显示。有人能帮忙吗

以下是我的代码，起作用：

            <div id="map-wrapper">
                <div id="map-canvas"></div>
            </div>

            <div id="map-wrapper">
                <div id="map-canvas"></div>
            </div>

以下是我的代码，它不起作用：

            <div id="map-wrapper">
                <div id="map-canvas"></div>
            </div>

            <div id="map-wrapper">
                <div id="map-canvas"></div>
            </div>

JavaScript：

        var map;
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644)
                };
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

---

请记住，对于100%的高度，您需要将所有父元素也设置为100%高度

在1中，地图位于html->body->div#map wrapper->div#map canvas。每个元素的高度必须为100%

所以基本上我只是将map wrapper div添加到css中：

html, body, #map-wrapper, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

使用

#map wrapper#map canvas

（注意缺少的逗号！）的现有css将省略周围的div

---

1我没有添加api键，因此您会收到错误警报，为了进行调试，我给了地图一个红色背景。

另外发布了ur javascriptI。我知道css和高度有多个问题，100%有时它与partent元素的大小有关。请用您的实际代码设置一个JSFIDLE（如果可能的话，如果不创建一个简单的基于彩色div的示例），正如我解释的，我已经用css针对了所有的父div？按预期工作（我只是不添加有效键）。我不希望像您的示例那样以像素定义高度-我希望它作为百分比。您帮助我意识到我在css中缺少逗号来分隔ID，谢谢