如何使用％而不是px來設置谷歌地圖的高度？

我在這裏是新的，並試圖問如何使用百分比，而不是使用px，我不知道是我的代碼問題或其他任何東西，所以我只是在這裏顯示我的代碼來檢查是否我的代碼問題或什麼，我嘗試在我的代碼中使用％，但不適合我。如何使用％而不是px來設置谷歌地圖的高度？

<script type="text/javascript"> 
    var markers = [ 
    { 
     "lat": '3.147746', 
     "lng": '101.575272', 
     "description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.' 
    }, 
    ]; 
    window.onload = function() { 
     LoadMap(); 
    } 
    function LoadMap() { 
     var mapOptions = { 
      center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
      zoom: 15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     var infoWindow = new google.maps.InfoWindow(); 

     for (var i = 0; i < markers.length; i++) { 
      var data = markers[i]; 
      var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 

      }); 

      (function (marker, data) { 
       google.maps.event.addListener(marker, "mouseover", function (e) { 
        infoWindow.setContent("<div style = 'width:300px;min-height:10px'>" + data.description + "</div>"); 
        infoWindow.open(map, marker); 
       }); 
      })(marker, data); 
     } 
    } 
</script>

這個代碼是我

<div id="map" style="height: 550px"> </div>

工作，我想這代碼，但不能正常工作

<div id="map" style="height:80%"></div>

來源

2017-05-05 Will KK

80％必須引用父元素。這可能是問題。 – Torben

問題是80％ - 如果你檢查'＃map'父項的高度，我懷疑你會發現它不是窗口的高度。嘗試使用'80vh'，它應該將其設置爲視口垂直高度的80％。 – Toby

你的問題與javascript/google api無關。向我們展示你的HTML和CSS（但只有必要的部分）。 – shaggy

你需要做的一兩件事。只要給100%高度body標籤

<body style="height:100%;"> 

</body>

現在你可以試着

<div id="map" style="height:80%"></div>

它將工作。

來源

2017-05-05 10:43:26

-1

這是一個CSS限制。 %不適用於身高。

相反，嘗試使用YouTube的響應衆所周知的方法：
放入絕對定位的內容放入容器與padding-top:80%

填充頂/漢字％是基於容器的寬度。

來源

2017-05-05 10:44:37

如何使用％而不是px來設置谷歌地圖的高度？

回答

相關問題