Я хочу иметь нижний колонтитул, который всегда подталкивается к нижней части страницы. Так что, когда страница имеет короткое содержание, нижний колонтитул будет внизу экрана, а если контент длинный, то нижний колонтитул будет после содержимого. Как я это сделаю?
ПРИМЕЧАНИЕ. Я не ищу data-position="fixed"
.
2- й РЕДАКТОР: Есть ли другой способ/я могу получить то, что хочу? Я попробовал трюк Райана Фейта, но, к сожалению, это не сработало для меня. Нельзя прокручивать страницу. Итак, есть ли другой способ/ы?
Вы можете установить атрибут 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");
}
Вот ДЕМО
Попробуйте изменить размер панели в демо, и вы увидите, что нижний колонтитул только снижается, когда содержимое больше не подходит для экрана.
Да, он должен быть совместимым с jQuery и безопасным.
Вы можете протестировать свой сайт на мобильных устройствах с хорошим хромовым расширением под названием Ripple
Расширение пульсации, можно найти здесь !
Интересной частью этого расширения является тот факт, что вы также можете использовать свои инструменты для создания хрома для настройки на лету. Несколько вариантов эмулятора для многих устройств.