jQuery Mobile и фиксированный нижний колонтитул

Question

У меня есть мобильное приложение jQuery, обернутое в PhoneGap. Я пытаюсь использовать фиксированный нижний колонтитул и заголовок и у меня возникли проблемы с нижним колонтитулом. Если у меня есть контент с длиной X, а затем после щелчка контент будет меньше - нижний колонтитул будет двигаться вверх, а не придерживаться нижней части экрана. Если я нажму на экран, он вернется на свое место.

Есть идеи, почему это происходит?

Мой код нижнего колонтитула:

<div data-role="footer" data-position="fixed" data-id="footer_main">
    <div data-role="navbar">
        <ul class="navbar">
            <li><a href="#home" data-icon="home" class="search">Home</a></li>
            <li><a href="#bycity" data-icon="search" class="search2">City</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

Эта проблема будет происходить на Android и iPhone примерно одинаково (iPhone, может быть, даже больше).

Кстати - я использую jQuery mobile "jquery.mobile-1.0b2" и PhoneGap 1.0

Answer 1

добавить стиль = "position: absolute" в нижний колонтитул div следующим образом:

<div data-role="footer" data-position="fixed" style="position: absolute">

Answer 2

У меня тоже такая же проблема.Моя навигация скрыта и будет отображаться, когда пользователь нажимает кнопку show-navigation-button.

Проблема в том, что JQM вычисляет и анимирует для позиции нижнего колонтитула верхний атрибут вместо использования position: fixed;bottom: 0;

Я уверен, что есть причина для их выбора.Но я не знаю, что это.И я не нашел никакой функции для изменения положения верхнего колонтитула.$('.footer').trigger('create');... не работает для меня.

Answer 3

нижние колонтитулы можно зафиксировать, добавив в них CSS-свойства.

bottom:0;
position:absolute !important; 
top: auto !important; 
width:100%;

Answer 4

Попробуйте добавить класс в нижний колонтитул:

<div class=”footer” data-role="footer" .....>

И добавьте следующую функцию в событие щелчка:

$('.footer').trigger('create');

Должно выглядеть примерно так:

$('.class').click(function() {

    $('.footer').trigger('create');

});