Cannot set map's div height for openlayers map

Question

This code make the map\'s div width max but height to 0 (the % value doesn\'t matter, it\'s always 0)

        
                      

              相关标签:
       
      

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% height to HTML and Body:

html, body {
height: 100%;
}

Answer 3

I've resolved this for my use-case by adding:

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

Update: This is no loner what I do under OpenLayers 3. I did this while using OpenLayers 2. I'm not saying it's pretty, but it was good enough for what I needed.

Answer 4

in case you use jquery, this works perfectly to 'stretch' your map to the container div holding it, notmatter what your css has 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 this early btw, ideally in a $(document).ready(function(){ /* here */ } block.

Answer 5

I ran into this topic because I wanted to set the map height in an ionic tab (ionicframework) to 100%. Even though this was not the original question maybe others run into this topic with the same issue. Additionally to the previous suggestions you have to set the height of the class .scroll to 100%:

html, body {
    width: 100%;
    height: 100%;
}

.scroll {
    height: 100%;
}

#map {
    height: 100%;
}