web-dev-qa-db-fra.com

définir la hauteur du contenu 100% mobile jquery

Je développe une page jQuery Mobile dans laquelle mon CSS est 

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

mais la page affiche comme ça

enter image description here

Je ne veux pas de cet espace vide entre le contenu et le pied de page Hauteur du contenu jusqu'au pied de page

htmlcssjquery-mobile
15
ddw147

Mettre à jour

J'ai ajouté un Pure CSS Solution ci-dessous. 

J'ai remarqué que .ui-content div ne remplit pas l'espace vide à 100%, il manque toujours 2px. Celles-ci proviennent de fixe barres d'outils en-tête et pied de page, car elles ont respectivement margin-top: -1px et margin-bottom: -1px. ( violon )

enter image description here

Ce n'était pas évident auparavant, car page div _ et pied de page_ ont le même data-theme="b" noir__. J'ai changé le .ui-page de background-color: red; pour montrer la différence.

Par conséquent, pour obtenir les meilleurs résultats, il est nécessaire de vérifier si barres d'outils sont corrigés. Voici la solution améliorée.

jQM> = 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);

jQM <= 1.2

Étant donné que fixe barres d'outils dans jQuery Mobile 1.2 et versions ultérieures ne reçoivent pas -1 pour topbottom, il n'est pas nécessaire de soustraire 1px de .outerHeight() de la barre d'outils.

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

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

_/ Démo - avec barres d'outils fixes

Démo - sans barres d'outils fixes (1)

(1) Sur la page du navigateur de bureau, défilez de 1 pixel Cependant, sur les appareils mobiles, ce n'est pas le cas. Cela est dû à la hauteur de body définie sur 99.9% et de .ui-page à 100%.

28
Omar

Ceci est juste pour ajouter quelques points à la réponse de @ Omar.

Sa mise à jour VIOLON

Mettez son code de redimensionnement dans une fonction et ajoutez scroll (0,0) en haut. Ceci élimine les problèmes étranges pouvant survenir lors des changements d'orientation (portrait par paysage) sur certains appareils.

function ScaleContentToDevice(){
    scroll(0, 0);
    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
    $(".ui-content").height(content);
}

La fonction doit ensuite être appelée sur pagecontainershow (pageshow si jQM 1.3) et vous devez ajouter un gestionnaire pour le redimensionnement et l’orientation de la fenêtre afin de conserver la taille correcte du contenu lorsque la taille de la fenêtre de visualisation change:

$(document).on( "pagecontainershow", function(){
    ScaleContentToDevice();        
});

$(window).on("resize orientationchange", function(){
    ScaleContentToDevice();
});
15
ezanker

Solution pure CSS

Remarque importante: Utilisez cette solution pour des pages spécifiques pour lesquelles vous ne souhaitez pas que le contenu de la page ou de la page défile verticalement. Parce que la page height sera définie sur 100%, elle ne défilera donc pas et vous ferez face à ce problème - problème .

  1. Plein écran:

    html,
body,
#pageID { /* specify page */
  height: 100%;
  margin: 0;
  padding: 0;
}

#pageID .ui-content {
  padding: 0;
}

.ui-content,
.ui-content #full-height-div { /* divs will inherit page's height */
  height: inherit;
}

    Démo

  1. Barres d'outils fixes (en-tête/pied de page):

    html,
body,
#pageID {
  height: 100%;
  margin: 0;
  padding: 0;
}

#pageID,
#pageID * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#pageID .ui-content {
  height: inherit; /* inherit height without padding nor border */
}

    Démo

  1. Barres d'outils flottantes:

    html,
body,
#pageID {
  height: 100%;
  margin: 0;
  padding: 0;
}

#pageID,
#pageID * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#pageID .ui-content {
  height: calc(100% - 89px); /* 88px = header's height 44px and footer's 44px plus 1px */
}

    Démo

10
Omar

Vous pouvez atteindre "hauteur 100%" avec CSS uniquement. Ajoutez les éléments suivants à votre sélecteur de contenu d'interface utilisateur:

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

Testé sur jQuery Mobile v1.4.3

4
nunoarruda

Je change la réponse de @ezanker.

Cela fonctionne, mais si j'ai deux pages, la page 2 sera redimensionnée lorsque je passerai à la page 2 de la page 1.

Et si je change l'événement pagecontainershow en pagecontainerbeforeshow, il ne fonctionnera pas correctement.

Je débogue et trouve la hauteur de l'en-tête ou du pied de page qui est erroné avant le spectacle.

code 

function ScaleContentToDevice(nextPage){
    var screen = $.mobile.getScreenHeight();
    var header = nextPage.children(".ui-header").hasClass("ui-header-fixed") ? nextPage.children(".ui-header").outerHeight() - 1 : nextPage.children(".ui-header").outerHeight();
    var footer = nextPage.children(".ui-footer").hasClass("ui-footer-fixed") ? nextPage.children(".ui-footer").outerHeight() - 1 : nextPage.children(".ui-footer").outerHeight()
    var contentCurrent = nextPage.children(".ui-content").outerHeight() - nextPage.children(".ui-content").height();
    var content = screen - header - footer - contentCurrent;

    nextPage.children(".ui-content").height(content);
}

$(document).on( "pagecontainershow", function(event, ui){
    var nextPage = $(ui.toPage[0]);
    ScaleContentToDevice(nextPage);
});
1
aotian16

Avec CSS pur fonctionne bien pour les pages de portrait. Vous devez définir les positions supérieure et inférieure en fonction de la hauteur de votre en-tête et du pied de page.

position: absolute;
top: 88px; /*your header height*/
right: 0;
bottom: 44px; /*your footer height */
left: 0;
background: white;
0
Tripex

la réponse simple n’est pas de redimensionner le contenu, mais de changer la couleur de fond de la page active comme ceci ...

.ui-page-active {background: #f1f1f1; }

... pour correspondre à la couleur du contenu de l'interface utilisateur et tout à coup le problème disparaît.

0
ppetree