使用jQuery Mobile实现内容占用所有可用空间

Question

使用jQuery Mobile实现内容占用所有可用空间

18

我有一个使用jQuery Mobile和PhoneGap的项目，我在页脚和内容区域有一些问题。

一个基本的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); 
}

这是结果:

内容后有页脚的页面

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

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

这样做没问题，但问题是地图在jQuery Mobile将页脚移到底部之前就已经加载了，因此我得到了这个页面：

Page with footer fixed

您可以看到地图仅使用移动到底部之前留下的空间。

我的问题是..我应该等待哪个事件或者需要在我的代码中添加什么，以便加载地图并使用标题和页脚之间的所有空间？

- SERPRO

3个回答

7

这个也可以工作：

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

- sherif

很好...作为其他人的附加信息：在支持CSS position: fixed的浏览器中（大多数桌面浏览器，iOS5+，Android 2.2+，BlackBerry 6等），使用"fixedtoolbar"插件的工具栏将固定在视口的顶部或底部，而页面内容在其间自由滚动。在不支持固定定位的浏览器中，工具栏将保持在流动位置，即页面的顶部或底部。要在页眉或页脚上启用此行为，请将data-position="fixed"属性添加到jQuery Mobile的页眉或页脚元素中。 - Badrush

5

只需添加此CSS代码：

<style>
    #map{
        height: 0;
    }

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

- Omer Yair

2

我不明白为什么将父元素高度设为0，子元素设为100%就能使它正常工作，但这确实很有效。 - dk123

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jasper · Accepted Answer

您不需要等待事件的发生，而是需要将.ui-content元素的高度设置为大约100%。

以下是一种纯CSS方法，可以实现jQuery Mobile伪页面的100%高度：

/*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/。