Jquery mobile 在jQuery mobile 1.4.0中，页面背景图像使用可折叠集移动和拉伸

我的jQuery移动应用程序中有一个可折叠集，问题是当我在展开页面时为页面添加背景图像时，关闭可折叠集。当我从css中删除以下行时，背景图像会拉伸并随可折叠集移动：

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

这个问题已经解决了，但这导致了另一个大问题，那就是当我展开一个可折叠文件，然后关闭它时，背景会收缩到“随着可折叠文件向上移动”，而这个可折叠文件下的页面部分会变得没有背景“透明”，这在移动设备上发生的比JSFIDLE更多，这是我的问题

---

请帮助我如何解决此问题，以便在不影响页面背景图像的情况下扩展和关闭可折叠文件？

您可以使用javascript将内容大小调整为设备大小：

更新

---

@ezankerThanks这解决了很多问题，但出现了一个奇怪的问题，有时我并不总是需要多次单击第三个可折叠的“省3”进行扩展，如果有其他可折叠的被扩展，则第三个可折叠的没有关闭！这只发生在可折叠的#3！我不能重现那种行为。。。如果op被回答，请接受。@Ezankeris出现在手机上，有时并不总是这样，我已经检查了代码，但仍然出现：（，当然我会接受，+1谢谢。我看不出代码有任何明显的错误。

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