（jQuery手機）如何讓主div包裝頁眉和頁腳之間的休息？

這是HTML代碼中，我使用jQuery移動（jQuery手機）如何讓主div包裝頁眉和頁腳之間的休息？

<div data-role="page" id="map-page"> 
<div data-role="header" data-theme="a" data-position="fixed" 
    data-fullscreen="true" data-tap-toggle="false"> 
    <h1>header</h1> 
</div> 

<div data-role="main" class="ui-content" id="map_canvas"> 
    <div id="map"></div> 
</div> 

<div data-role="footer" data-theme="a" data-position="fixed" 
    data-fullscreen="true" data-tap-toggle="false"> 
    <h1>footer</h1> 
</div>

ID =地圖裏寫的谷歌地圖。和..這是CSS

<style> 
    #map-page{ 
     width: 100%; 
     height: 100%; 
     padding: 0; 
    } 
    #map-canvas{ 
     position: relative; 
     overflow: hidden; 
     min-height:100%; 
     height:auto !important; 
    } 
    #map{ 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     height: 100%; 
     width: 100%; 
    } 
</style>

在這種情況下谷歌地圖覆蓋頁眉和頁腳下的所有區域。我可以通過標題&多雲看到地圖的頂部和底部。我想要的是該地圖只是將頁眉和頁腳之間的其餘部分包裹起來。我怎樣才能做到這一點？

謝謝。

來源

2017-07-28 GM Park

我一直在使用百分比完成我的工作。這是我的代碼。

#map-page{ 
     width: 100%; 
     height: 100%; 
     padding: 0; 
    } 
    #header, #footer{ 
     height: 6%; 
     text-align: center; 
     margin: 0; 
    } 
    #main{ 
     position: absolute; 
     top: 6%; 
     height: 88%; 
     width: 100%; 
    } 
    #map{ 
     position: absolute; 
     height: 100%; 
     width: 100%; 
    }

它給我我想要的結論。也許優秀的開發人員比我更優秀的解決方案。

來源

2017-07-28 16:32:11

你不需要指定固定的頁眉和頁腳。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div data-role="page"> 
 
    <div data-role="header"> 
 
    <h1>Welcome To My Homepage</h1> 
 
    </div> 
 

 
    <div data-role="main" class="ui-content"> 
 
    <div id="map" style="width:400px;height:400px;"></div> 
 
    </div> 
 

 
    <div data-role="footer"> 
 
    <h1>Footer Text</h1> 
 
    </div> 
 
</div> 
 

 
</body> 
 
<script> 
 
function myMap() { 
 
var mapOptions = { 
 
    center: new google.maps.LatLng(51.5, -0.12), 
 
    zoom: 10, 
 
    mapTypeId: google.maps.MapTypeId.HYBRID 
 
} 
 
var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
} 
 
</script> 
 

 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script> 
 
</html>

來源

2017-07-28 13:11:40

我想要的是3個元素（頁眉，頁腳，主）填充所有屏幕沒有任何空白空間。但是，謝謝你的回答。再見。 p.s）恐怕你在代碼中顯示了你的api-key ... –

（jQuery手機）如何讓主div包裝頁眉和頁腳之間的休息？

回答

相關問題