2

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

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

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

请帮助我如何解决这个问题所以可以在不影响页面背景图像的情况下展开和关闭折叠项？

4

1 回答 1

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);   
}
于 2014-02-27T22:59:34.117 回答