Comment puis-je calculer avec précision la hauteur du contenu dans jQuery Mobile pour remplir l'espace entre l'en-tête et le pied de page ?

Amélioration du calcul de la hauteur du contenu pour les pages Web avec jQuery Mobile

Pour remplir efficacement l'espace entre l'en-tête et le pied de page dans une page Web jQuery Mobile , un calcul précis de la hauteur du contenu est crucial. Pour y parvenir, il faut considérer l'impact des barres d'outils fixes, qui peuvent laisser un léger vide.

Solution pour jQuery Mobile >= 1.3

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();

/* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

$(".ui-content").height(content);

Solution pour jQuery Mobile <= 1.2

Depuis les barres d'outils fixes dans les versions 1.2 et inférieures n'introduisez pas de marge de 1px, le calcul est simplifié :

var header = $(".ui-header").outerHeight();

var footer = $(".ui-footer").outerHeight();

Pleine résolution

Pour tenir compte du remplissage autour du div de contenu, soit ajustez directement la variable de contenu, soit soustrayez la valeur de remplissage (32 px) de la variable contentCurrent. De plus, si des barres d'outils fixes sont présentes, supprimez 1 px de leur mesure externalHeight().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!