Question

我是新来的并试图询问如何使用百分比而不是使用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>

Answer 1

你需要做一件事。只需将100%身高标记为正文标记

即可

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

</body>

现在你可以试试

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

它会起作用。

Answer 2

这是一个CSS限制。 %不适用于身高。

相反，请尝试使用众所周知的YouTube响应方法：
将您的内容置于具有padding-top:80%

的容器中的绝对位置

padding-top / -bottom％取决于容器宽度。

如何使用％而不是px在谷歌地图中设置高度？

2 个答案: