2

jQueryモバイルアプリに折りたたみ可能なセットがあります。問題は、展開するときにページの背景画像を追加すると、折りたたみ可能なものを閉じると、背景画像が伸びて折りたたみ可能なもので移動することです.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/

更新されたフィドル

$(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 に答える