Maximizing the size of the content div in jQueryMobile

Question

How can I maximize the size of the div that plays the role of "content"?

I recognize that this may simply be a basic CSS question, but it feels like it is tied to CSS in jQueryMobile.

I'm placing a Google Map in the content div and I'd like the map to fill the available verticle space on the mobile browser. Instead, it's a fixed size of about 10px (give or take).

<div data-role="page">
 <div data-role="header" class="ui-header ui-bar-a">Header</div>
 <div data-role="content" class="ui-body ui-content">
  <div id="divMap">google map via javascript</div>
 </div>
 <div data-role="footer">footer</div>

In this case, jQueryMobile always creates the minimal size for its contents, and I always want it to be 80% of the available page.

Answer 1

You could probably use jQuery (I haven't worked with jQuery mobile, though, so this might not work directly):

$(document).ready(
  function(){
    $('#content').height($(window).height()*0.8);
  }
);

JS Fiddle demo