Massimizzare la dimensione del div contenuti in jQueryMobile

Question

Come posso massimizzare la dimensione del div che svolge il ruolo di "contenuti"?

Mi rendo conto che questo può essere semplicemente una domanda di base di CSS, ma ci si sente come esso è legato a CSS in jQueryMobile.

Sto mettendo una mappa di Google nel div contenuti e mi piacerebbe la mappa per riempire lo spazio verticle disponibile sul browser mobile. Invece, si tratta di una dimensione fissa di circa 10px (prendere o lasciare).

<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 questo caso, jQueryMobile crea sempre la dimensione minima per i suoi contenuti, e ho sempre voglio che sia l'80% della pagina disponibili.

Answer 1

Si potrebbe forse usare jQuery (non ho lavorato con jQuery Mobile, però, quindi questo potrebbe non lavorare direttamente):

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

JS Fiddle demo