jQuery Mobile Footer Push an den unteren Rand der Seite - jquery, css, jquery-mobile

Ich möchte eine Fußzeile haben, die immer an den unteren Rand der Seite gedrückt wird. Wenn also die Seite einen kurzen Inhalt hat, erscheint die Fußzeile am unteren Rand des Bildschirms und wenn der Inhalt lang ist, wird die Fußzeile angezeigt nach dem Inhalt. Wie mache ich das?

HINWEIS: Ich suche nicht das data-position="fixed".

2^nd BEARBEITEN: Gibt es andere Wege, wie ich das bekommen kann, was ich will? Ich habe versucht Ryan Faits Trick Aber leider hat es für mich nicht funktioniert. Die Seite kann nicht mehr gescrollt werden. Gibt es einen anderen Weg?

Antworten:

Sie können das Min-Height-Attribut des jQM festlegenInhalt div dies zu erreichen. Nachfolgend berechnet die SetMinHeight-Funktion die Mindesthöhe für den Inhalt div, die die angegebene Gerätehöhe ausfüllen würde. Dann rufen Sie es auf pagecontainershow auf und wann immer die Fenstergröße geändert oder die Ausrichtung geändert wird:

$(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");
}

Hier ist ein DEMO

Versuchen Sie, die Größe des Bedienfelds in der Demo zu ändern. Die Fußzeile wird nur gesenkt, wenn der Inhalt nicht mehr auf den Bildschirm passt.

Ja, es sollte jquery mobile kompatibel und sicher sein.

Sie können Ihre Site auf mobilen Geräten mit einer schönen Chrome-Erweiterung namens Ripple testen

Ripple Erweiterung, hier zu finden!

Der Spaß an dieser Erweiterung ist die Tatsache, dass Sie Ihre Chrome-Entwicklerwerkzeuge auch verwenden können, um schnell zu optimieren. Mehrere Emulatoroptionen für viele Geräte.