HTML表格溢出页脚

Question

这个问题不是什么

我没有常见的问题，即页脚没有粘在页面底部。页脚 粘在页面底部，没关系。

问题是：

当我的表格中的记录多于浏览器窗口的高度时，表格的高度会溢出页脚。页脚似乎粘在页面/窗口的底部，但只是在表格的最后一行上方几行。

看起来像这样：

我在ASP.NET MVC中使用HTML 5，这种情况发生在所有浏览器中。

我有以下HTML结构：

<div id = "header">...</div>

<div id = "parent">
  <form id = "frm">
    <div id = "gridContainer">
      <table id = "theStringsGrid">
        ....
      </table>
    </div>
  </form>
  <div class = "push" ></div>
</div>

<div id = "footer">...</div>

以下CSS（下面仅给出相关部分）：

html, body { margin: 0; padding: 0; height: 100%; font-family: Sans-Serif; font-size: small; }

#parent { min-height: 100%; position: relative; margin: 0 20px -4em; }

.push { clear: both; }

#footer { height: -4em; clear: both; margin-left: 4px; margin-right: 4px; }

#theStringsGrid 
{ 
    table-layout: fixed;

    margin-left: 40px;
    margin-right:20px;

    border-width: 2px; 
    border-color: Gray; 
    border-style: groove; 

    font-family: Century Gothic, Calibri, Batang, Verdana, Arial;

    padding-left: 2px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;

    table-layout: fixed;
    width: 1200px;
}

#theStringsGrid tr { line-height: 9px; }

#theStringsGrid tr td 
{ 
    border-style: groove; 
    border-width: 0px; 
    border-color: Gray; 
    padding: 2px 2px 2px 2px; 

    height: 14px;
    overflow: hidden;
}

更新：已修复

感谢大家花时间处理我的问题。您的所有评论和答案都非常有助于我找到问题。

但是我的灯泡继续播放是因为@ JamesDonnelly对这个问题的评论，“为什么你的页脚有-4em高度？”。

我将height的{​​{1}}从footer更改为-4em，将4em bottom更改为margin #parent到-4em，现在看起来很漂亮：

以下是我所做的更改：

4em

Answer 1

您只需从-的高度移除footer：

#footer { height: 4em; ... }

Answer 2

也许最好的想法是将max-height设置为#theStringsGrid表的父元素......

#gridContainer {
     max-height : 1000px;/*for example*/
     overflow-y: auto; /* scroll only if needed*/
}

要正确设置表的max-height，请使用一些jQuery：

var refreshMaxHeight = function() {
   //try it but document should be better
   var windowsHeight= $( window ).height(); // returns height of browser viewport
   var windowsHeight= $( document ).height(); // returns height of HTML document
   $('#gridContainer').css({'max-height' :
         windowsHeight
         -$('#footer').height()
         -$('#gridContainer').position().top
    });
};
$(document).ready(function() {
    refreshMaxHeight();
    //manage the resize event could be a good idea
    $( window ).resize(function() { refreshMaxHeight();});

});

Answer 3

如果您将位置固定在桌面上，它将始终越过页脚。

3个解决方案：

1. 在桌子上使用相对位置，但这取决于你需要什么

2. 在页脚上使用z-index，使其保持溢出

3. 将最大高度设置为您的表并允许其内部溢出，以便您可以滚动。

希望这有帮助！