JQuery Mobile - 用地圖填充內容div，不滾動

Question

我試過很多解決方案，但都沒有工作。

我有一個固定的頁眉和頁腳（真正固定不會消失）的佈局，我喜歡用地圖來填充<div data-role="content">。我也希望禁用此內容div中的垂直和水平滾動。

解決方案不工作：一年
Google Map extends off edge of page when embedded inside jQuery Mobile "page"
google maps in jquery mobile
How to create div with 100% height with jquery mobile?
JQuery-Mobile content area 100% height between head and foot
Maximise div[data-role=content] in Jquery Mobile
How can I display a full screen google map with jQuery Mobile?

Answer 1

更晚，但如果有人還是要解決這個問題，這裏是如何：

使用jQuery移動1.3.1和谷歌地圖API V3

在HTML中進行測試，使用該內容：

<div data-role="content"> 
    <div id="mapDiv"></div> 
</div> 

提示：不要在頁面的任何DIV使用data-fullscreen。

比，在你的CSS，使用此：

#mapDiv { 
    padding: 0; 
    position : absolute !important; 
    top : 40px !important; 
    right : 0; 
    bottom : 58px !important; 
    left : 0 !important;  
} 

記住創建地圖的mapDiv裏面，所以你的JS會是這樣：

map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions); 

就是這樣！即使在旋轉顯示它的設備時，它也能正常工作。

提示：您的頁眉和頁腳必須使用data-position="fixed"和data-tap-toggle="false"。