Javascript 将Google API地图（和图表）设置为100%高度_Javascript_Html_Css_Google Maps_Google Maps Api 3

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

javascript html css google-maps google-maps-api-3

Javascript 将Google API地图（和图表）设置为100%高度,javascript,html,css,google-maps,google-maps-api-3,Javascript,Html,Css,Google Maps,Google Maps Api 3,我正在尝试使用谷歌地图API使我的地图具有100%的高度。（过去我一直想让我的谷歌图表API图表也有百分比高度）到目前为止，我读到的所有地方都说，首先要将html和身高设置为100%。我已经这样做了，但是地图不会显示，除非我让它的容器有一个固定的高度 <html lang="en"> <head> <meta charset="utf-8"> <title>Map</title>

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

到目前为止，我读到的所有地方都说，首先要将html和身高设置为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>


地图
html，正文{
宽度：100%；
身高：100%；
}
.地图{
宽度：100%；
身高：100%；
}
/////全局变量和数组/////
var-markerary=[]；
粘虫变种；
var-mapZoom=9/
var Mapcenterat=41.82454868；
var-mapCenterLon=-87.6341629；
//加载页面后，启动初始化函数以生成映射
google.maps.event.addDomListener（窗口“加载”，初始化）//加载窗口时，启动初始化功能（如下）
//GoogleAPI初始化构建地图的函数
函数初始化（）{
/////变数/////
var infoWindow=new google.maps.infoWindow({
});
var map_canvas=document.getElementById（'mainMap'）；
变量映射_选项={
中心：新的google.maps.LatLng（mapCenterLat，mapCenterLon），
缩放：地图缩放，
mapTypeId:google.maps.mapTypeId.TERRAIN
};  
//画地图
var map=new google.maps.map（地图画布，地图选项）；
}//结束初始化（）

看起来您缺少一个

位置：绝对位置
只有在为图元指定位置时，百分比高度/宽度才起作用
要使div遍布浏览器窗口，请执行以下操作：
.map {
position: absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
}

谢谢绝对位置有效。为什么相对位置不起作用？假设我想在地图后显示一个div？如果使用绝对定位，则宽度和高度以及顶部和左侧都来自整个文档，相对定位也意味着相对高度和宽度。可能的重复可能是No的重复，因为它们都没有提到定位，这显然是我的问题所在。