css - 如何使传单地图高度可变

Question

在我的应用程序中，我将地图的 div 设置为

<div id="map" style="height: 610px; width:100%"></div>

但是为了让我的地图响应，我想让高度也 100%，如果我做到了，height: 100%那么它就不起作用了。

如何使高度也像宽度一样可变，以便可以在任何设备上正确查看地图。

演示：http: //jsfiddle.net/CcYp6/

如果您更改地图的高度和宽度，那么您将无法获得地图。

Answer 1

您需要将父元素设置为height: 100%;first

html, body {
   height: 100%;
}

演示

演示（这不起作用，因为没有定义父高度）

说明：你为什么需要这样做？因此，当您指定元素的高度时%，出现的第一个问题是：100%什么？默认情况下，div 的高度为0px，因此100%对于 div 根本不起作用，但将父元素设置height为100%;将起作用。

Answer 2

您必须使用 JavaScript 设置 div 大小。

$("#map").height($(window).height()).width($(window).width());
map.invalidateSize();

你可以在这里找到一个完整的例子。

Answer 3

使用 height="100vh" 在较新的浏览器中有效。但没关系。

Answer 4

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 could be clearer on this point as it's a common use case. The mobile tutorial hints at it.