jQuery Mobile: Bâton de pied de page en bas de la page

Question

Est-il possible, en gardant à l'esprit la façon dont le jQuert Mobile cadre fonctionne, pour corriger la page de sorte que le pied de page toujours aligné avec le bas de la page, quelle que soit la hauteur.

Comme il est à la hauteur de jQuery, la page va changer, surtout que les appareils sont en rotation du portrait au paysage, donc la solution serait de prendre cela en compte.

Juste pour préciser - je n'ai pas besoin de pied de page pour être au bas de la fenêtre, juste au travail, de sorte que la page par défaut de la hauteur de ne pas descendre en dessous de la fenêtre d'affichage de la hauteur

Merci

Answer 1

Vous pouvez ajouter ceci dans votre fichier css:

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}  

Si les données de la page-rôle maintenant 100% de la hauteur, et le pied de page est en position absolue.

Aussi Yappo ont écrit un excellent plugin que vous pouvez trouver ici: jQuery Mobile dans un iScroll plugin http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

espérons que vous avez trouvé la réponse!

Une réponse de mise à jour

Vous pouvez maintenant utiliser l' data-position="fixed" d'attribut pour garder votre pied de page de l'élément sur le fond.
Docs et des démos: http://view.jquerymobile.com/master/demos/toolbar-fixed/

Answer 2

Étant donné que cette question est une sorte de vieux, beaucoup de choses ont changé.

Vous pouvez maintenant obtenir ce comportement en ajoutant ceci au pied de div

data-position="fixed"

Plus d'infos ici: http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

Attention aussi, si vous utilisez le mentionné précédemment CSS avec la nouvelle JQM solution, vous n'obtiendrez PAS le même comportement!

Answer 3

Dans mon cas, j'avais besoin d'utiliser quelque chose comme cela pour garder le pied coincé au fond si il n'y a pas beaucoup de contenu, mais pas flottant au-dessus de tout en permanence, comme data-position="fixed" semble faire...

.ui-content
{
    margin-bottom:75px; /* Set this to whatever your footer size is... */
}

.ui-footer {
    position: absolute !important;
    bottom: 0;
    width: 100%;
}

Answer 4

jQm propose:

• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/docs-footers.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fixed.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fullscreen.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/footer-persist-a.html

Aucun de ces travaux?

Answer 5

Les lignes suivantes fonctionnent très bien...

var headerHeight = $( '#header' ).height();
var footerHeight = $( '#footer' ).height();
var footerTop = $( '#footer' ).offset().top;
var height = ( footerTop - ( headerHeight + footerHeight ) );
$( '#content' ).height( height );