When showing a google map in jquery mobile it appears (after reading the forums) that code like the following is required:

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
    <div data-role="header"><h1>Map Page</h1></div>
    <div data-role="content" style="width:100%; height:100%; padding:0;"> 
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </div>
</div>

Taking away the height on outside div causes the div to drop to height 0 and the map not being displayed. I was hoping to get some dynamic text below the map (based on the contents on the) which length I do not know so I can't set an absolute height. Has anyone got a workaround for this problem?