无法为openlayers地图设置地图的div高度

Question

此代码使地图的div宽度最大但高度为0(%值无关紧要,始终为0)

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

这是有效的,因为它将地图的div设置为固定大小,但显然不是我想要的.

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

有人经历过这个吗？有人建议如何解决这个问题？

我也在使用jquery(-mobile)

谢谢

Answer 1

这是我的修复:

function fixContentHeight(){
    var viewHeight = $(window).height();
    var header = $("div[data-role='header']:visible:visible");
    var navbar = $("div[data-role='navbar']:visible:visible");
    var content = $("div[data-role='content']:visible:visible");
    var contentHeight = viewHeight - header.outerHeight() - navbar.outerHeight();
    content.height(contentHeight);
    map.updateSize();
}

Answer 2

您需要为 HTML 和 Body 提供 100% 的高度：

html, body {
height: 100%;
}