JQuery Mobile Sticky Footer

Я хочу нижний колонтитул в JQuery Mobile, который не фиксирован, но всегда находится внизу страницы.

Нравится это: http://ryanfait.com/sticky-footer/ (но в JQuery Mobile), а не как стандартные JQuery Mobile Fixed footers.

Итак, нижний колонтитул должен появиться в конце содержимого или в нижней части экрана, в зависимости от того, что меньше.

Любые идеи о том, как подойти к этому?

Edit

Основная проблема заключается в том, что я, похоже, не могу получить div с data-role=content, чтобы фактически заняться полной высотой экрана.

Ответы

Ответ 1

В основном вам просто нужно проверить высоту каждого элемента data-role="content", чтобы убедиться, что в области заголовка/нижнего колонтитула/области содержимого используется вертикальное пространство в окне просмотра.

Например:

$(document).on("pageshow", ".ui-page", function () {
    var $page  = $(this),
        vSpace = $page.children('.ui-header').outerHeight() + $page.children('.ui-footer').outerHeight() + $page.children('.ui-content').height();

    if (vSpace < $(window).height()) {
        var vDiff = $(window).height() - $page.children('.ui-header').outerHeight() - $page.children('.ui-footer').outerHeight() - 30;//minus thirty for margin
        $page.children('.ui-content').height(vDiff);
    }
});​

Этот код будет запускаться каждый раз, когда страница перемещается на.

Вот демо: http://jsfiddle.net/aBVtJ/1/

Ответ 2

Я решил это, используя в основном CSS. Преимущества этого в отношении принятого ответа - это обработка случаев, когда размер страницы изменяется после отображения страницы (например, изменение размера браузера, изменение ориентации или даже более простые случаи, такие как разборные/гармонические разделы). Он также имеет гораздо меньше кода Javascript и не имеет математической схемы.

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

[data-role=page] {
  min-height: 100%;
  position: relative;
}

[data-role=content] {
  padding-bottom: 40px; /* based on how tall your footer is and how much gap you want */
}

[data-role=footer] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px /* this can be configurable, or omitted, as long as the above padding-bottom is at least as much as the height of the footer is */
}

Абсолютный нижний колонтитул вызвал переходы страницы jQuery Mobile, чтобы показать мерцающий нижний колонтитул (особенно переходы "слайд" ), поэтому я добавил это небольшое количество Javascript:

$(document).live( 'pagebeforechange', function() {
  // hide footer
  $('[data-role=footer]').hide();
});

$(document).live( 'pagechange', function() {
  // show footer
  $('[data-role=footer]').show();
});