Maximizando el tamaño de la div de contenido en jquery mobile

Question

¿Cómo puedo maximizar el tamaño de la div que desempeña el papel de "contenido"?

Reconozco que esto puede ser simplemente una cuestión básica de CSS, pero se siente como que está ligado a CSS en jquery mobile.

Estoy colocando un mapa de Google en el div contenido y me gustaría el mapa para llenar el espacio verticle disponibles en el navegador móvil. En su lugar, se trata de un tamaño fijo de alrededor de 10px (más o menos).

<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>

En este caso, jquery mobile siempre crea el tamaño mínimo de su contenido, y siempre quiere que sea el 80% de la página disponible.

Answer 1

Probablemente se podría usar jQuery (no he trabajado con jQuery móvil, sin embargo, por lo que este podría no funcionar directamente):

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

JS violín demostración