CSS页脚div不会隐藏答案

【问题标题】：CSS footer div won't hideCSS页脚div不会隐藏
【发布时间】：2014-04-23 18:27:33
【问题描述】：

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

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

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

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

这里是FIDDLE。

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

    if table contains > x entries 
    {

     hide footer

    } else {

      show footer

    }

【问题讨论】：

页脚不应固定
在我的实际代码中，这不是一个解决方案，最终发生的是当我摆脱 data-position="fixed" 时，页脚 div 最终被放置在中间>
页脚固定了吗？ data-position="fixed"?
是的，但我被告知要摆脱它，当我这样做时，它在演示小提琴上工作正常，但不是我的实际代码。这就是为什么我一直在寻找另一种解决方案。
我真的建议获得一个与现场版本完全一样的演示。否则 SO 上的每个人都会在黑暗中开枪。

标签： javascript jquery html css jquery-mobile

【解决方案1】：

我认为对您来说最好的解决方案是按照其他人的建议删除页脚上的 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");
}

更新FIDDLE

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

【讨论】：

jsfiddle.net/7X6Fn 当我没有设置 data-position = fixed 时会发生这种情况。请帮忙。

【解决方案2】：

页脚不应固定：

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

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

【讨论】：

在我的实际代码中，这不是一个解决方案，最终发生的是当我摆脱 data-position="fixed" 时，页脚 div 最终被放置在中间>
在 JSFiddle 中它解决了这个问题，因此您提供给我们的小提琴中可能还缺少其他东西。
会有这样的工作吗？ $(document).on('focus', 'Table', function() { $.mobile.activePage.find("div[data-role='footer']").hide(); });跨度>
是的，它很可能无法正常工作，因为我使用不正确。
Jquery Mobile 在初始化页面时会为 DOM 做大量的工作，因此不建议在初始化页面后更改 DOM。我建议删除data-position="fixed" 并修复页脚。只是为了解决问题本身，而不是问题的副作用。

【解决方案3】：

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

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

然后添加一个条件比如如果rowCount > 5，就可以在页脚添加一个隐藏类。

隐藏类可以是这样的：

.hidden { display: none; }

所以基本上，

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

【讨论】：

我认为这个解决方案可能有效，你可以更新我的小提琴并向我展示这个工作
会有这样的工作吗？ $(document).on('focus', 'Table', function() { $.mobile.activePage.find("div[data-role='footer']").hide(); })

【解决方案4】：

试试这个：

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

【讨论】：

会有这样的工作吗？ $(document).on('focus', 'Table', function() { $.mobile.activePage.find("div[data-role='footer']").hide(); })