CSS页脚div不会隐藏 [英] CSS footer div won't hide

问题描述

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

当我有很多条目在表中的页脚。最后发生的是，页脚将阻止其他条目，如下图所示。

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

我想知道是否有通用的方法，我可以检查是否有很多条目，然后不显示页脚？或有什么办法解决这个问题？请咨询我是新的web开发和不知道很多css技巧。

这里是 FIDDLE 。

这大致是我想实现的，但我不知道如果它的最佳解决方案，所有建议。

 如果表格包含> x条目
 {
 
隐藏页脚
 
}其他{
 
显示页脚
 
} 
  

解决方案

我认为最好的解决方案是删除数据位置=固定在页脚上，如其他人建议的，但随后还添加一些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）。 
 var footer = $（。ui-footer）。hasClass（ui-footer-fixed）？ $（。ui-footer）。outerHeight（） -  1：$（。ui-footer）。 
 var contentCurrent = $（。ui-content）。outerHeight（） -  $（。ui-content）。 
 
 var content = screen  -  header  -  footer-contentCurrent; 
 $（。ui-content）。css（min-height，content +px）; 
} 
  

已更新 FIDDLE

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

In this sample app I have a header , footer and the content div contains a table which holds various stats of some basketball players.

I was having a problem with the footer when i have a lot of entries in the table. What ends up happening is that the footer will block the other entries as displayed in the picture below.

Then when i click in the middle the footer disappears as shown in picture below.

I was wondering if there is generic way where i can check to see if there are a lot of entries then dont show the footer at all? or is there some way around this problem? Please advice i am new to web dev and dont know much css tricks.

Here is the FIDDLE.

This is roughly what i want to achieve, however i am not sure if its the best solution so i am open to all suggestions.

    if table contains > x entries 
    {

     hide footer

    } else {

      show footer

    }

解决方案

I think the best solution for you is to remove the data-position="fixed" on the footer as suggested by others, but then also add some javascript that sets the min-height of the content div according to device height. That way for a small number of rows in the table, the footer still appears at the bottom of the screen. As the number of rows increases beyond the device height, the footer just gets pushed down remaining below the table.

Below, the SetMinHeight function calculates the minimum height for the content div that would fill the given device height. Then you call it on pagecontainershow and whenever the window resizes or the orientation changes:

$(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

NOTE: for the calc to work, I had to remove the CSS zoom: #tbcontent{zoom:80%;}. If you really need the zoom, you may have to adjust the min-height calculation...

这篇关于CSS页脚div不会隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！