最大化 jQueryMobile 中内容 div 的大小

Question

如何最大化扮演“内容”角色的div的大小？

我认识到这可能只是一个基本的 CSS 问题，但感觉它与 jQueryMobile 中的 CSS 相关。

我将 Google 地图放置在内容 div 中，并且希望地图能够填充移动浏览器上的可用垂直空间。相反，它的固定大小约为 10px（给定或取取）。

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

在这种情况下，jQueryMobile 始终为其内容创建最小大小，并且我始终希望它是可用页面的 80%。

Answer 1

您可能可以使用 jQuery（不过，我没有使用过 jQuery mobile，所以这可能无法直接工作）：

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

JS Fiddle demo