页眉和页脚之间的 jQuery 移动面板答案

【问题标题】：jQuery mobile panel between header and footer页眉和页脚之间的 jQuery 移动面板
【发布时间】：2014-08-19 13:31:18
【问题描述】：

jQuery 移动面板通常会从上到下转换部分页面：

<div data-role="panel">...</div>

演示页面的左侧目录面板被限制在页眉和页脚之间 - 而不是从上到下： http://demos.jquerymobile.com/1.4.3/intro/

如何限制页眉和页脚之间的面板？在 CSS 中是如何实现的？

【问题讨论】：

有一个 JS 解决方案而不是 CSS 解决方案。
只需将其添加到您的 css 文件 (.ui-panel-display-overlay { z-index: 100; })

标签： jquery-mobile

【解决方案1】：

你需要先计算viewport、header和footer的高度。从 viewport 的高度减去两个工具栏的高度将为您提供两个工具栏之间的空间高度。此外，通过覆盖面板的top 样式将面板向下推。

    /* active page */
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
    /* viewport */
    screen = $.mobile.getScreenHeight(),
    /* header - whether it's fixed */
    header = $(".ui-header", activePage).hasClass("ui-header-fixed") ? $(".ui-header", activePage).outerHeight() - 1 : $(".ui-header", activePage).outerHeight(),
    /* footer - whether it's fixed */
    footer = $(".ui-footer", activePage).hasClass("ui-footer-fixed") ? $(".ui-footer", activePage).outerHeight() - 1 : $(".ui-footer", activePage).outerHeight(),
    /* math 101 */
    panelheight = screen - header - footer;
/* update "min-height" and "top" */
$('#panelID').css({
    'top': header,
        'min-height': panelheight
});

Demo

【讨论】：