在jQueryMobile中最大化內容div的大小

Question

如何最大化扮演「內容」角色的div的大小？

我認識到這可能只是一個基本的CSS問題，但它感覺像是綁定到jQueryMobile中的CSS。

我在內容div中放置了Google Map，我希望地圖填充移動瀏覽器上的可用垂直空間。相反，它是一個固定的大小約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移動的工作，雖然如此，這可能不是直接工作）：

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

JS Fiddle demo