CSS 如何使传单地图高度可变

how to make leaflet map height variable

提问by vaibhav shah

In my Application I was making div of map as

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

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

but to make my map responsive I want to make height also 100%, if I make height: 100%then it is not working.

但是为了使我的地图具有响应性，我想让高度也为 100%，如果我这样做，height: 100%则它不起作用。

How can I make height also variable like width so that map can be seen properly on any device.

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

Demo : http://jsfiddle.net/CcYp6/

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

If you change height & width of map then you will not get map.

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

回答by Mr. Alien

You need to set the parent elements to height: 100%;first

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

html, body {
   height: 100%;
}

Demo

演示

Demo(This won't work as no parent height is defined)

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

Explanation: Why do you need to do that? So when you specify an element's height in %then the 1st question that arises is: 100%of what? By default, a div has height of 0px, so 100%for a div simply won't work, but setting the parent elements heightto 100%;will work.

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

回答by jgillich

You have to set the div size with JavaScript.

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

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

You can find a complete example here.

您可以在此处找到完整的示例。

回答by user8207609

Use height="100vh" works in newer browser. but its ok.

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