jQuery Mobile et un pied de page fixe

Question

J'ai une application mobile jQuery enveloppée dans PhoneGap. J'essaie d'utiliser un pied de page fixe et un en-tête et d'avoir des problèmes avec le pied de page. Si j'ai un contenu avec X longueur, puis après un clic le contenu est plus petit - le pied de page monterait et ne collerait pas au bas de l'écran. Si je clique sur l'écran, il reviendra à sa place.

Des idées pour lesquelles cela se produit?

Mon code de bas de page est:

<div data-role="footer" data-position="fixed" data-id="footer_main"> 
    <div data-role="navbar"> 
     <ul class="navbar"> 
      <li><a href="#home" data-icon="home" class="search">Home</a></li> 
      <li><a href="#bycity" data-icon="search" class="search2">City</a></li> 
     </ul> 
    </div><!-- /navbar --> 
</div><!-- /footer --> 

Ce problème se passerait-il sur Android et iPhone dans à peu près de la même façon (iPhone peut-être même plus).

BTW - J'utilise jQuery mobile "jquery.mobile-1.0b2" et PhoneGap 1.0

Answer 1

Essayez d'ajouter une classe à votre pied de page:

<div class=”footer” data-role="footer" .....> 

Et ajoutez la fonction suivante à votre clic événement:

$('.footer').trigger('create'); 

devrait ressembler à ceci:

$('.class').click(function() { 

    $('.footer').trigger('create'); 

}); 

Answer 2

J'ai le même problème aussi. Ma navigation est masquée et sera affichée lorsque l'utilisateur clique sur le bouton de navigation.

Le problème est que JQM calcule et anime pour la position du pied de page l'attribut d'instabilité supérieur de l'utilisation de la position: fixe; en bas: 0; Je suis sûr qu'il y a une raison pour leur choix. Mais je ne sais pas ce que c'est. Et je n'ai trouvé aucune fonction pour repositionner le pied de page en haut. $('.footer').trigger('create'); .. ne fonctionne pas pour moi.

Answer 3

vous pouvez avoir des bas de page corrigés en bas en y ajoutant des propriétés CSS.

bottom:0; 
position:absolute !important; 
top: auto !important; 
width:100%; 

Answer 4

style add = "position: absolute" au pied de page div comme ceci:

<div data-role="footer" data-position="fixed" style="position: absolute">