如何制作传单高度变量

Question

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

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

但为了使我的地图响应我想要高度也100%,如果我做,height: 100%那么它不起作用.

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

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

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

Answer 1

您需要将父元素设置为height: 100%;第一个

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"适用于较新的浏览器.但没关系.