Unable to set div div height for map with open layers

Question

This code makes the maximum width of the card max, but the height is up to 0 (the value of% does not matter, always 0)

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

This works because it sets the display of the div to a fixed size, but obviously not what I want.

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

Has anyone experienced this? Any suggestion on how to fix this?

I also use jquery (-mobile)

thanks

Answer 1

This is my fix:

 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

You need to give 100% HTML height and body:

 html, body { height: 100%; } 

Answer 3

if you use jquery, this works great to “stretch” your map in the container by holding it, and not what your css set for the map:

  $(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); }); 

You would call it early btw, ideally, in the $ (document) .ready (function () {/ * here * /} block.

Answer 4

I came across this topic because I wanted to set the height of the map on the tab with ions ( ionicframework ) to 100%. Even if this was not an original question, others may be facing the same issue with this topic. In addition to the previous sentences, you should set the .scroll class height to 100%:

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

Answer 5

I solved this for my use by adding:

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

Update: this is not what I do in OpenLayers 3. I did it when using OpenLayers 2. I do not say it beautifully, but it was good enough for what I needed.