Maximum size of div content in jQueryMobile

Question

How can I maximize the size of a div that plays the role of “content”?

I understand that this may just be a basic CSS question, but it looks like it is tied to CSS in jQueryMobile.

I place a Google map in a div for content, and I would like the map to fill the available vertical bar space in a mobile browser. Instead, it has 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 a minimum size for its content, and I always want it to be 80% of the available page.

Answer 1

Perhaps you can use jQuery (I did not work with the jQuery mobile device, although this may not work directly):

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

JS Fiddle demo