在我的应用程序中,我正在制作地图div
<div id="map" style="height: 610px; width:100%"></div>
但为了使我的地图能够响应,我想让身高也达到100%,如果我做height: 100%
那么它就无法正常工作。
如何使高度也像宽度一样变化,以便可以在任何设备上正确显示地图。
如果你改变身高&amp;地图的宽度,那么你将无法获得地图。
答案 0 :(得分:28)
您需要先将父元素设置为height: 100%;
html, body {
height: 100%;
}
Demo(这不起作用,因为没有定义父高度)
说明:你为什么要这样做?因此,当您在%
中指定元素的高度时,出现的第一个问题是:100%
是什么?
默认情况下,div的高度为0px
,因此div的100%
根本不起作用,但将父元素height
设置为100%;
将起作用。
答案 1 :(得分:24)
您必须使用JavaScript设置div大小。
$("#map").height($(window).height()).width($(window).width());
map.invalidateSize();
您可以找到完整的示例here。
答案 2 :(得分:9)
使用height =&#34; 100vh&#34;适用于较新的浏览器。但没关系。
答案 3 :(得分:1)
在其周围放置一个position: relative
包装父级,然后将地图绝对定位以填充该父级:
.map-wrapper {
position: relative;
}
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="map-wrapper">
<div id="map"></div>
</div>
如果#map
已经有一个可以相对定位的父母,那就使用它;您将不需要.map-wrapper
元素。
Leaflet Quick Start Guide在这一点上可能更清晰,因为这是一个常见的用例。 mobile tutorial对此进行了提示。