jQuery Mobile Footer Push au bas de la page - jquery, css, jquery-mobile

Je veux avoir un pied de page qui est toujours poussé au bas de la page. De sorte que lorsque la page a un contenu court, le pied de page sera au bas de l'écran et si le contenu est long, le pied de page sera après le contenu. Comment vais-je faire ça?

REMARQUE: Je ne cherche pas le data-position="fixed".

2^nd MODIFIER: Existe-t-il un autre moyen d'obtenir ce que je veux? j'ai essayé Le truc de Ryan Fait mais malheureusement, cela n’a pas fonctionné pour moi. La page ne peut plus défiler. Alors, y at-il d’autres moyens?

Réponses:

Vous pouvez définir l'attribut min-height du jQMcontenu div pour y parvenir. Ci-dessous, la fonction SetMinHeight calcule la hauteur minimale pour la div de contenu qui remplirait la hauteur de périphérique donnée. Ensuite, vous l'appelez sur pagecontainershow et chaque fois que la fenêtre est redimensionnée ou que l'orientation change:

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

Voici une DEMO

Essayez de redimensionner le panneau de la démo et vous verrez que le pied de page ne descend que lorsque le contenu ne correspond plus à l'écran.

Oui, il devrait être compatible mobile et sûr.

Vous pouvez tester votre site sur des appareils mobiles avec une extension chromée appelée Ripple.

Extension d'ondulation, peut être trouvé ici!

La partie amusante de cette extension est le fait que vous pouvez également utiliser vos outils de développement Chrome pour peaufiner votre travail à la volée. Plusieurs options d'émulateur pour de nombreux appareils.