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