将 Google API 地图（和图表）设置为 100% 高度答案

【问题标题】：Setting Google API Maps (and charts) to 100% height将 Google API 地图（和图表）设置为 100% 高度
【发布时间】：2014-09-21 23:25:42
【问题描述】：

我正在尝试使用 Google Maps API 使我的地图具有 100% 的高度。（过去我想让我的 Google Charts API 图表也有百分比高度）

到目前为止，我读过的所有地方都说首先将 html 和 body 高度设置为 100%。我已经这样做了，但除非我将其容器设置为固定高度，否则地图不会显示。

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <style>
            html, body{
                width:100%;
                height:100%;
            }
            .map{
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <div class="mainWrap">
        <div id="mainMap" class="map">
        </div>
    </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>


    <script  type="text/javascript">

        /////Global variables and arrays/////
            var markerArray = [];
            var myID;
            var mapZoom = 9; /

            var mapCenterLat = 41.82454868;
            var mapCenterLon = -87.6341629;

        //Initiate the initialize function to build map, after page loads
        google.maps.event.addDomListener(window, 'load', initialize); //when window loads, start initialize function (below)

        //Google API Initialize function that builds map
        function initialize() {
            /////Variables/////
            var infoWindow = new google.maps.InfoWindow({
            });
            var map_canvas = document.getElementById('mainMap');    
            var map_options = {
                center: new google.maps.LatLng(mapCenterLat,mapCenterLon),
                zoom: mapZoom, 
                mapTypeId: google.maps.MapTypeId.TERRAIN 
            };  

            //Draw the map 
            var map = new google.maps.Map(map_canvas, map_options);


        } //End initialize()



    </script>
</html>

【问题讨论】：

Custom Google Map won't show in div element 的可能重复项
Google Maps V3, Map won't display when wrapped in a second div的可能重复
不，因为这些都没有提到定位，这显然是我的问题。
jsfiddle.net/v09rofs5/1

标签： javascript html css google-maps google-maps-api-3

【解决方案1】：

您的地图 div 的 CSS 中似乎缺少 position: absolute;

百分比高度/宽度仅在您也为元素指定位置时才有效。

让 div 遍布浏览器窗口：

.map {
position: absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
}

【讨论】：

谢谢。绝对位置有效。为什么相对位置不起作用？假设我想在地图之后显示一个 div？
如果使用绝对定位，宽度和高度，以及top和left都是从整个文档导出的，相对定位也意味着相对高度和宽度。