Maximizando o tamanho da div em jQuerymobile

Question

Como posso maximizar o tamanho da div que desempenha o papel de "conteúdo"?

Reconheço que essa pode ser simplesmente uma pergunta básica do CSS, mas parece que está ligada ao CSS no JQuerymobile.

Estou colocando um mapa do Google na div e gostaria do mapa para preencher o espaço vertical disponível no navegador móvel. Em vez disso, é um tamanho fixo de cerca de 10px (dar ou levar).

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

Nesse caso, o JQueryMobile sempre cria o tamanho mínimo para seu conteúdo, e eu sempre quero que seja 80% da página disponível.

Answer 1

Você provavelmente poderia usar o jQuery (eu não trabalhei com o JQuery Mobile, então isso pode não funcionar diretamente):

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

Demonstração do violino JS