jQuery Mobile使用所有可用空間的內容

我有一個使用jQuery Mobile + phonegap的項目，並且在頁腳和內容div方面存在一些問題。jQuery Mobile使用所有可用空間的內容

基本jQuery Mobile的頁面看起來是這樣的：

<div data-role="page" data-theme="b" id="map"> 

    <div data-role="header" data-theme="b" data-position="inline"> 
     <a href="#" data-rel="back" data-icon="arrow-l">Back</a> 
     <h1>MAP</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="map_canvas"> 
    </div><!-- /content --> 

    <div data-role="footer" data-theme="d"> 
     <h4>TEST</h4> 
    </div><!-- /footer --> 
</div><!-- /page -->

現在我試圖加載谷歌地圖的內容，所以我用這個在JavaScript：

$('div').live("pageshow", function() 
{ 
    var myOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
}

這是結果：

Page with footer after content

的問題是，富特R不堅持下，除非你指定這樣的屬性data-position="fixed"：

<div data-role="footer" data-theme="d" data-position="fixed"> 
    <h4>TEST</h4> 
</div><!-- /footer -->

這很好，但問題是地圖的jQuery移動採取頁腳底部之前加載，因此我有這個頁：

Page with footer fixed

在那裏你只能看到使用前它移至底部留下的空間地圖。

我的問題是......我應該等待什麼事件，或者需要添加到我的代碼以加載地圖，以便使用頁眉和頁腳之間的所有空間？

來源

2012-02-28 SERPRO

您不需要等待事件，就需要將.ui-content元素的高度設置爲100%左右。

這裏是實現100%高度爲jQuery Mobile的僞頁的純CSS方法：

/*make sure the viewport is 100% height*/ 
html, body { 
    height : 100%; 
} 

/*make the page element 100% height*/ 
#map-page { 
    height : 100%; 
} 

/*specify a height for the header so we can line-up the elements, the default is 40px*/ 
#map-page .ui-header { 
    height : 40px; 
} 

/*set the content to be full-width and height except it doesn't overlap the header or footer*/ 
#map-page .ui-content { 
    position : absolute; 
    top  : 40px; 
    right : 0; 
    bottom : 30px; 
    left  : 0; 
} 

/*absolutely position the footer to the bottom of the page*/ 
#map-page .ui-footer { 
    position : absolute; 
    bottom : 0; 
    left  : 0; 
    width : 100%; 
    height : 30px; 
}

下面是一個演示：http://jsfiddle.net/jasper/J9uf5/2/

來源

2012-02-28 17:09:39 Jasper

嗨..感謝您的建議。如果我使用所有的CSS應用程序變得瘋狂，並且不能正常工作..但是如果我只添加這部分：http://pastebin.com/JPUTjB0N它與jQuery Mobile一起使用非常漂亮。請編輯您的答案以標記它正確。 – SERPRO 2012-02-29 10:37:06

感謝您的解決方案。我一直在尋找這個相當長的時間。 – WhatsInAName 2012-11-15 19:06:02

這個解決方案確實幫助我實現了jQM v1.2.0。謝謝！ – themanatuf 2012-11-24 02:52:00

這其中也適用：

<html> 
<head> 
<meta name="viewport" id="viewport" 
    content="width=device-width, height=device-height, 
    initial-scale=1.0, maximum-scale=1.0, 
    user-scalable=no;" /> 
</head> 
<body> 
    .... 
    <div data-role="header" data-position="fixed"> 
    .... 
    <div data-role="footer" data-position="fixed"> 
    .... 
</body> 
</html>

來源

2013-02-22 20:36:16 sherif

不錯...爲其他人添加的信息：在支持CSS位置的瀏覽器中：固定（大多數桌面瀏覽器，iOS5 +，Android 2.2+，BlackBerry 6等），使用「fixedtoolbar」插件的工具欄將會固定在視口的頂部或底部，而頁面內容則在兩者之間自由滾動。在不支持固定位置的瀏覽器中，工具欄將保持流動狀態，位於頁面的頂部或底部。要在頁眉或頁腳上啓用此行爲，請將data-position =「fixed」屬性添加到jQuery Mobile頁眉或頁腳元素。 – Badrush 2016-03-04 00:20:20

只需添加此css：

<style> 
    #map{ 
     height: 0; 
    } 

    #map_canvas { 
     height: 100%; 
     padding: 0; 
     text-shadow: none; 
    } 
</style>

來源

2013-05-09 22:29:03

我不明白爲什麼讓父母身高0，並希望孩子100％使這項工作，但這很好。 – dk123 2014-01-12 02:06:35

jQuery Mobile使用所有可用空間的內容

回答

相關問題