2

这个问题不是什么

我没有页脚不粘在页面底部的非常常见的问题。页脚确实粘在页面底部，这很好。

问题是什么：

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

它看起来像这样：

在此处输入图像描述

我将 HTML 5 与 ASP.NET MVC 一起使用，这在所有浏览器中都会发生。

我有以下 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高度？ ”的问题的评论。

我改变了heightfrom footerto-4em和4emof bottom marginalso #parentfrom -4emto 4em，现在看起来不错：

在此处输入图像描述

以下是我所做的更改：

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

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

3 回答 3

3

你只需-要从你footer的高度中删除：

#footer { height: 4em; ... }
于 2013-10-24T16:21:03.840 回答
2

也许最好的主意是将 a 设置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();});

});
于 2013-10-24T15:48:48.620 回答
1

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

3个解决方案：

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

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

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

希望这可以帮助！

于 2013-10-24T15:52:01.050 回答