Question

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

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

enter image description here

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

enter image description here

我想知道是否有通用方法我可以查看是否有很多条目然后根本不显示页脚？或者有什么办法解决这个问题？请建议我是web dev的新手，并且不太了解css技巧。

这是FIDDLE。

这大致是我想要实现的目标，但我不确定它是否是最佳解决方案，所以我对所有建议持开放态度。

    if table contains > x entries 
    {

     hide footer

    } else {

      show footer

    }

Answer 1

我认为最适合您的解决方案是删除数据位置=＆＃34;固定＆＃34;在其他人建议的页脚上，但随后还添加了一些javascript，根据设备高度设置内容div的最小高度。这种方式对于表格中的少量行，页脚仍然出现在屏幕的底部。随着行数增加超出设备高度，页脚将被推下，保持在桌子下方。

下面，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");
}

更新了 FIDDLE

注意：让calc工作，我不得不删除CSS缩放：#tbcontent {zoom：80％;}。如果你真的需要变焦，你可能需要调整最小高度计算...

Answer 2

不应修复页脚：

http://jsfiddle.net/fmpeyton/L2vQ3/

从此行中删除data-position='fixed'：

Answer 3

好吧，您可以使用以下内容检查该表中的行数：

var rowCount = $('#myTable tr').length;

然后添加一个条件，例如if rowCount＆gt; 5，你可以在页脚中添加一个隐藏的类。

隐藏的类可以是这样的：

.hidden { display: none; }

基本上，

if(rowCount > x) { $('.footer').addClass('hidden'); }

Answer 4

试试这个：

$(document).ready(function(){
    var tablerow = $("table tr").length-1;
    if(tablerow>20)
    {
        $(".ui-title").hide();             
    }
    else
    {
        $(".ui-title").show();     
    }
});

CSS页脚div不会隐藏

4 个答案: