使用表格显示时，粘滞页脚在 Firefox 中不起作用答案

【问题标题】：Sticky footer not working in Firefox when using a table display使用表格显示时，粘滞页脚在 Firefox 中不起作用
【发布时间】：2014-08-02 21:01:49
【问题描述】：

我正在使用我网站上this 帖子中概述的粘性页脚技术。对于我网站上 90% 的页面，粘性页脚可以完美运行。在另外 10% 的页面中，我在 Firefox 中遇到了一个有趣的问题。基本上在这些页面中，我想将页面内容垂直居中，因此我正在调整帖子中的 CSS 代码：

    html, body {
    height: 100%;
    }

    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    display: table; /* <--- THE NEW LINE OF CODE */
    }

    .footer, .push {
    height: 4em;
    }

这使我可以将.wrapper 内的 div 垂直居中，只需将其分配给以下类：

.table_row {
    display: table-row;
    vertical-align: middle;
}

在 Safari、Chrome 等中，粘性页脚仍然位于页面底部，并且内容很好地垂直居中。然而，在 Firefox 中，粘性页脚紧跟在内容之后，导致内容被挤压到页眉下方的页面顶部。以下是在这种情况下 HTML 的示例：

     <html>
        <head>
            <link rel="stylesheet" href="layout.css" ... />
        </head>
        <body>
            <div class="wrapper">
                <div class="table_row"><p>Your website content here.</p></div>
                <div class="push"></div>
            </div>
            <div class="footer">
                <p>Copyright (c) 2008</p>
            </div>
        </body>
    </html>

here 是它的 JSFiddle。

我尝试在 CSS 中调整高度、最小高度等，但没有成功。在这一点上，我完全不知道解决方案，因此感谢您提供任何帮助或指导。

谢谢。

【问题讨论】：

标签： html css firefox footer

【解决方案1】：

删除 height: auto !important; 行即可。

【讨论】：

这确实会导致页脚被推回页面底部，但它会删除页脚的“粘性”方面。如果页面滚动或超出窗口底部，则页脚位于错误位置并停留在那里。
好吧，我尝试了您的原始代码，即使在 chrome 中，它也没有您所说的“粘性方面”......无论是否使用 height: auto !important; Chrome 29，它的行为都相同
有趣，我在 Chrome 35 中，它工作正常。如果加载 JSFiddle 页面然后调整 chrome 的高度，页脚不会移动？它位于“页面”的什么位置？
它确实在移动，它在页面底部，但即使你删除我说的这一行，它也在那里。
你完全正确，对不起。我测试它的页面一定有它自己的问题，因为碰巧它不起作用。谢谢！