jQuery мобильный нижний колонтитул толчок к нижней части страницы

0

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

ПРИМЕЧАНИЕ. Я не ищу data-position="fixed".

2- й РЕДАКТОР: Есть ли другой способ/я могу получить то, что хочу? Я попробовал трюк Райана Фейта, но, к сожалению, это не сработало для меня. Нельзя прокручивать страницу. Итак, есть ли другой способ/ы?

Теги:
jquery-mobile

2 ответа

1

Вы можете установить атрибут min-height для jQM content div для выполнения этого. Ниже функция SetMinHeight вычисляет минимальную высоту для содержимого div, которая заполняет заданную высоту устройства. Затем вы вызываете его на pagecontainershow и всякий раз, когда изменяется окно или меняется ориентация:

$(document).on("pagecontainershow", function () {
    SetMinHeight();
});

$(window).on("resize orientationchange", function () {
    SetMinHeight();
});

function SetMinHeight() {
    var screen = $.mobile.getScreenHeight();
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;
    $(".ui-content").css("min-height", content + "px");
}

Вот ДЕМО

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

0

Да, он должен быть совместимым с jQuery и безопасным.

Вы можете протестировать свой сайт на мобильных устройствах с хорошим хромовым расширением под названием Ripple

Расширение пульсации, можно найти здесь !

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

  • 0
    Я попробовал уловку, которую я связал, но она не работает. :( Есть ли другой способ получить то, что я хочу?
  • 0
    Только что проверил, и этот трюк делает это: mystrd.at/modern-clean-css-sticky-footer
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню