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)

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

This works, as it sets the map's div to a fixed size, but is obviously not what I want.

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

Has someone experienced this? Anyone a suggestion on how to fix this?

I'm also using 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% height to HTML and Body:

html, body {
height: 100%;
}

Answer 3

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.