Question

我正在使用我网站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;
    }

这允许我通过简单地将div分配给以下类来垂直居中.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中调整高度，最小高度等，但没有运气。在这一点上，我完全失去了解决方案，所以感谢任何帮助或指导。

感谢。

Answer 1

删除 height: auto !important; 行，它会起作用。

使用桌面显示时，粘滞页脚无法在Firefox中工作

1 个答案: