L'immagine di sfondo della pagina si sposta e si estende con il set pieghevole in jquery mobile 1.4.0

Question

Ho un set pieghevole nella mia app jQuery mobile, il problema è che quando ho aggiunto un'immagine di sfondo per la pagina come espandere, chiudo la pieghevole l'immagine di sfondo è allungata e si muove con il collapsibles, quando ho rimosso queste righe dail mio css:

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

.

Questo prolem ha risolto, ma questo ha causato un altro grosso problema che è che quando espanso una pieghevole e poi chiudo lo sfondo si restringerà "spostandosi con il collassibe" e la parte della pagina sotto questa pieghevole diventa senza uno sfondo "Trasparente "Questo succede sui dispositivi mobili più di Jsfiddle, questo è il mio jsfiddle

Aiutami come posso risolvere questo problema in modo che i collapsibili possano essere espansi e chiusi senza influire sull'immagine di sfondo della pagina?

Answer 1

È possibile dimensionare il contenuto alla dimensione del dispositivo utilizzando JavaScript: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

.

Aggiornato Fiddle

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

.