Контент, использующий все доступное пространство с jQuery Mobile - PullRequest
Новая
       59

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

18 голосов
/ 28 февраля 2012

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

Теперь я пытаюсь загрузить карты 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); 
}

И вот результат:

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

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

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

Ответы [ 3 ]

21 голосов
/ 28 февраля 2012

Вам не нужно ждать события, вам нужно установить высоту элемента .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/

7 голосов
/ 23 февраля 2013

Этот тоже работает: 

<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>
5 голосов
/ 10 мая 2013

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

<style>
    #map{
        height: 0;
    }

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