无法为打开的图层地图设置地图的 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%;
}

Answer 3

如果你

使用jquery，这可以完美地将你的地图"拉伸"到保存它的容器div，无论你的CSS为地图设置了什么：

   $(window).resize(function () {
      //$('#log').append('<div>Handler for .resize() called.</div>');
         var canvasheight=$('#map').parent().css('height');
         var canvaswidth=$('#map').parent().css('width');
         $('#map').css("height", canvasheight);
         $('#map').css("width", canvaswidth);
   });

顺便说一句，你会称之为早期的，理想情况下是在$（document）.ready（function（）{/* here */}块中。

Answer 4

我遇到了这个话题，因为我想将离子选项卡（ionicframework）中的地图高度设置为 100%。即使这不是最初的问题，也许其他人会遇到同样的问题。除了前面的建议之外，您还必须将类 .scroll 的高度设置为 100%：

html, body {
    width: 100%;
    height: 100%;
}
.scroll {
    height: 100%;
}
#map {
    height: 100%;
}

Answer 5

我已经通过添加以下内容为我的用例解决了这个问题：

setInterval(function(){map.updateSize();}, 500);

更新：我在OpenLayers 3下所做的并不孤单。我在使用 OpenLayers 2 时这样做了。我不是说它很漂亮，但它足以满足我的需求。