javascript - CSS 页脚 div 不会隐藏

Question

在这个示例应用程序中，我有一个页眉、页脚和内容 div 包含一个表格，其中包含一些篮球运动员的各种统计数据。

当我在表格中有很多条目时，我遇到了页脚问题。最终发生的是页脚将阻止其他条目，如下图所示。

然后，当我在中间单击时，页脚消失，​​如下图所示。

我想知道是否有通用方法可以检查是否有很多条目然后根本不显示页脚？还是有办法解决这个问题？请建议我是网络开发新手，不太了解 CSS 技巧。

这是 FIDDLE .

这大致是我想要实现的，但我不确定它是否是最佳解决方案，所以我愿意接受所有建议。

    if table contains > x entries 
    {

     hide footer

    } else {

      show footer

    }

Answer 1

我认为最适合您的解决方案是按照其他人的建议删除页脚上的 data-position="fixed"，然后添加一些根据设备高度设置内容 div 的最小高度的 javascript。这样对于表格中的少量行，页脚仍然出现在屏幕底部。随着行数增加到超出设备高度，页脚将被向下推，保持在表格下方。

下面，SetMinHeight 函数计算将填充给定设备高度的内容 div 的最小高度。然后你在 pagecontainershow 上调用它，每当窗口调整大小或方向改变时:

$(document).on("pagecontainershow", function () {
    SetMinHeight();
});

$(window).on("resize orientationchange", function () {
    SetMinHeight();
});

function SetMinHeight() {
    var screen = $.mobile.getScreenHeight();
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;
    $(".ui-content").css("min-height", content + "px");
}

Updated FIDDLE

注意:为了使计算正常工作，我必须删除 CSS 缩放:#tbcontent{zoom:80%;}。如果你真的需要缩放，你可能需要调整最小高度计算......