Javascript CSS页脚div赢得'；隐藏

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

当表中有很多条目时，我的页脚有问题。最终的结果是页脚将阻止其他条目，如下图所示

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

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

这是你的电话号码

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

    if table contains > x entries 
    {

     hide footer

    } else {

      show footer

    }

---

不应修复页脚：

从此行中删除

data position='fixed'

：

---

好吧，您可以用如下方法检查该表中的行数：

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

然后添加一个条件，例如如果rowCount>5，则可以向页脚添加一个隐藏类

隐藏类可以是这样的：

.hidden { display: none; }

所以基本上

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

试试这个：

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

---

我认为最好的解决方案是按照其他人的建议删除页脚上的data position=“fixed”，然后添加一些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");
}

更新

---

注意：为了让calc工作，我必须删除CSS缩放：#tbcontent{zoom:80%；}。如果你真的需要缩放，你可能需要调整最小高度计算……/P>页脚不应该固定在我的实际代码中，这不是一个解决方案，最终的结果是，当我去掉数据位置时，页脚div最终被放置在中间，=“固定”是页脚固定的？code>data position=“fixed”？是的，但我被告知要摆脱它，当我这样做时，它在演示小提琴上运行良好，但不是我的实际代码。这就是为什么我一直在寻找另一个解决方案。我真的建议获得一个与实时版本完全相同的演示。否则这里的每个人都会在黑暗中拍摄。我想这个解决方案可能会奏效。你有可能更新我的小提琴并向我展示这个作品吗$（文件）.on（‘焦点’，‘表’，函数’）{$.Mobile .ActudioPv.find（“div [数据角色=页脚’））.HIDED（；）；}，在我的实际代码中，这不是一个解决方案，而最终发生的是，当我删除JSFiddle中的数据位置=“固定”时，页脚div最终被置于中间，它修复了这个问题，所以你提供给我们的小提琴可能还缺了一些东西。你喜欢这件作品吗$（document）.on（'focus'，'Table'，function（）{$.mobile.activePage.find（'div[data role='footer']））.hide（）；}）；是的，这很可能不起作用，因为我没有正确地使用它。Jquery Mobile在初始化页面时对DOM做了大量工作，因此不建议在初始化后对DOM进行更改。我建议删除

data position=“fixed”

并修复页脚。这样我们就解决了问题本身，而不是问题的副作用。这样做行吗$（document）.on（'focus'，'Table'，function（）{$.mobile.activePage.find（'div[data role='footer']）.hide（）；}）这就是当我不设置数据位置=fixed时发生的情况。请帮忙。