Page Arrière-plan de la page Image Déplace et s'étirer avec un ensemble pliable dans JQuery Mobile 1.4.0

Question

J'ai un ensemble pliable dans mon application mobile JQuery, le problème est que lorsque j'ai ajouté une image d'arrière-plan pour la page, car je développe, fermez la couleur d'arrière-plan enfoncée et se déplace avec des collapsibles, lorsque j'ai supprimé ces lignes demon CSS:

background-repeat: no-repeat; 
background-size: 100% 100%;

Ce prolème a résolu mais cela a provoqué un autre gros problème, ce qui est que lorsque j'éloigne une pliure, puis fermez-le, le fond se rétrécira "Déplacer avec le collapibe" et la partie de la page sous ce pliable devient sans fond "Transparent "Cela se produit sur des appareils mobiles plus que Jsfiddle, c'est mon jsfiddle

aidez-moi comment puis-je résoudre ce problème afin que les collapses puissent être élargis et fermés sans affecter l'image de fond de page?

Answer 1

Vous pouvez taper votre contenu à la taille de l'appareil à l'aide de JavaScript: http://jqmtricks.wordpress.com/2014/02/06/Content-Div-Height-fill-Page-Height/

mise à jour violon

$(document).on("pageshow", function(){
    SizeContent();
});
$(window).on("resize orientationchange", function(){
    SizeContent();
});

function SizeContent(){
    var screen = $.mobile.getScreenHeight();
    //if you have a page header
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    //if you have a page footer
    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);   
}