如何制作传单高度变量

时间:2013-05-14 12:41:37

标签: css leaflet

在我的应用程序中,我正在制作地图div

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

但为了使我的地图能够响应,我想让身高也达到100%,如果我做height: 100%那么它就无法正常工作。

如何使高度也像宽度一样变化,以便可以在任何设备上正确显示地图。

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

如果你改变身高&amp;地图的宽度,那么你将无法获得地图。

4 个答案:

答案 0 :(得分:28)

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

html, body {
   height: 100%;
}

Demo

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对此进行了提示。