Question

我有一个使用jQuery Mobile + phonegap的项目，我在页脚和内容div方面存在一些问题。

基本的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

问题是，除非您像这样指定属性data-position="fixed"，否则页脚不会粘在底部：

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

这很好，但问题是地图是在jquery mobile将页脚放到底部之前加载的，因此我有这个页面：

Page with footer fixed

只有在地图移动到底部之前，才能看到地图。

我的问题是..我应该等待什么事件，或者我需要添加什么样的代码来加载地图以便它将使用页眉和页脚之间的所有空间？

Answer 1

您不需要等待某个活动，您需要将.ui-content元素的高度设置为100%左右。

这是一个实现jQuery Mobile伪页面100%高度的纯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/

Answer 2

这个也有效：

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

Answer 3

只需添加此css：

<style>
    #map{
        height: 0;
    }

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

使用jQuery Mobile的所有可用空间的内容

3 个答案: