页面背景图像移动和伸展与jQuery Mobile中的可折叠集1.4.0

Question

我在我的jQuery移动应用程序中有一个可折叠集，问题是当我在展开时添加了页面的背景图像时，关闭背景图像的可折叠是伸展的，当我从中删除这些线我的CSS：

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

.

这个蠕动已经解决，但这导致了另一个大问题，即当我扩展可收缩然后关闭它时，背景会缩小“与折叠折叠”和这个可折叠的页面部分变得毫无背景“透明“这种情况发生在移动设备上超过JSFIDDLES，这是我的 jsfiddle

请帮助我如何解决这个问题，以便可以扩展和关闭透明符号而不影响页面背景图像？

Answer 1

您可以使用javascript： http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

更新 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);   
}

.