Question

我的jQuery移动应用程序中有一个可折叠的设置，问题是当我在扩展时为页面添加背景图像时，关闭可折叠的背景图像拉伸并随着可折叠移动，当我从中移除这些线条时我的css：

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

这个问题已经解决了但是这又引起了另一个大问题，那就是当我展开一个可折叠然后关闭它时，背景将缩小“向上移动到collapsibe”并且这个可折叠的页面部分变得没有背景“透明“这种情况发生在移动设备上，而不是jsFiddle，这是我的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);   
}

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

1 个答案: