Comment créer du contenu mobile jQuery à 100 % de hauteur ?

Définition d'une hauteur de 100 % pour le contenu dans jQuery Mobile

Dans jQuery Mobile, il peut être difficile de définir la hauteur du contenu à 100 % de l'espace disponible, surtout s'il y a un espace entre le contenu et le pied de page.

CSS Implémentation

Le code CSS suivant peut ne pas suffire pour obtenir les résultats souhaités :

.ui-content {
  background: transparent url('./images/bg.jpg');
  background-size: 100% 100%;
  min-height: 100%;
  color: #FFFFFF;
  text-shadow: 1px 1px 1px #000000;
}

Solution

Une solution améliorée prend en compte si les barres d'outils d'en-tête et de pied de page sont fixes. Si tel est le cas, le code doit soustraire 1 px de leur hauteur extérieure pour tenir compte des marges négatives.

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. Subtract this value if desired. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

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

Pour jQuery Mobile <= 1.2 :

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

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

Notes supplémentaires

• Si des barres d'outils fixes sont présentes sur la page, le contenu défilera de 1 px sur les navigateurs de bureau.
• Sur les appareils mobiles, la page peut ne pas défiler en raison du corps et de la hauteur de la page .ui paramètres.

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!