JQuery Mobile - пространство между контентом и нижним колонтитулом

Question

Я разрабатываю свой первый мобильный сайт с JQuery Mobile 1.4.0, который должен работать только на iPad с поддержкой apple-mobile-web-app.

Все, что я хочу достичь, это удалить пробел между содержимым div и нижним колонтитулом. Я понятия не имею, откуда и от чего избавиться.

<div data-role="page" id="pagec" data-theme="a"> 
    <div data-role="header" data-id="head2" data-position="fixed" data-tap-toggle="false"> 
    <div data-role="navbar"> 
     <ul> 
      <?php getNav(); ?> 
     </ul> 
    </div> 
    </div> 
<div data-role="content"> 
    <!-- SWIPE --> 
    <?php getContent(); ?> 
    <!-- //SWIPE -->  
</div> 
    <div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
    <?php getForm(); ?> 
    </div> 
</div> 

Пространство появляется только на iPad - никаких проблем с Firefox.

Есть аналогичные тем, чтобы это, но никакого решения не работал для меня ...

Answer 1

Если страница имеет только работать на IPad, то, возможно, вы могли бы просто использовать CSS? Следующие должны иметь эффект: колонтитула наложения на содержание в Firefox, но он должен решить эту проблему на IPad

введите в заголовке страницы:

<style> 
    #footer { 
    position:relative; 
    top:-20px; } 
    </style> 

изменения футер div, чтобы указать его id

<div id="footer" data-role="footer" data-position="fixed" data-tap-toggle="false"> 
    <?php getForm(); ?> 
</div> 

Answer 2

Я нашел проблему. Моя вина! Атрибут height в viewport-meta был неправильным.

<meta name="viewport" content="height=device-height, width=device-width,initial-scale=1.0,maximum-scale=1.0"> 

... изменен ...

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" >