Question

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

我知道这可能只是一个基本的CSS问题，但感觉它与jQueryMobile中的CSS有关。

我将在内容div中放置一个谷歌地图，我希望该地图能填充移动浏览器上可用的垂直空间。相反，它是一个固定的尺寸，大约10倍（给予或索取）。

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

友情链接