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);

   });

你可以称之为早期的btw，理想情况是在 $（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时这样做了。我不是说它很漂亮，但它足以满足我的需要。

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

5 个答案: