(jQuery mobile) 如何让 main div 将页眉和页脚之间的其余部分包装起来？

Question

这是 html 我使用 jQuery 手机编写的代码

<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=map 是 google 地图。还有..这是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>

在这种情况下 google 地图覆盖了页眉和页脚下的所有区域。我可以通过页眉和页脚多云看到地图的顶部和底部。我想要的是地图只是将页眉和页脚之间的其余部分包裹起来。我该怎么做？

谢谢。

Answer 1

您不需要为页眉和页脚指定固定。

<!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>

Answer 2

我已经用百分比完成了我的工作。这是我的代码。

#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%;
    }

它给出了我想要的结论。也许比我更好的开发人员会给出更优雅的解决方案。

(jQuery mobile) 如何让 main div 将页眉和页脚之间的其余部分包装起来？

(jQuery mobile) how to let main div wrap the rest between header and footer?

html

css

jquery-mobile