Содержимое, использующее все доступное пространство с помощью jQuery Mobile

У меня есть проект с 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 -->

Теперь я пытаюсь загрузить карты Google в контент, поэтому я использую это в 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 переместит нижний колонтитул на нижнюю часть, в результате у меня есть эта страница:

Если вы видите карту только с использованием пробела, оставшегося до того, как он переместится в нижнюю часть.

Мой вопрос: какое событие я должен ожидать или что мне нужно добавить в мой код, чтобы загрузить карту, чтобы он использовал все пространство между верхним и нижним колонтитулом?

Ответ 1

Вам не нужно ждать события, вам нужно установить высоту элемента .ui-content примерно на 100%.

Вот чисто CSS-метод достижения высоты 100% для псевдо-страницы jQuery Mobile:

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

Ответ 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>

Ответ 3

Просто добавьте этот css:

<style>
    #map{
        height: 0;
    }

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