我正在使用网站上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内部垂直居中：.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中调整高度，最小高度等，但没有运气。至此，我对解决方案一无所知，因此不胜感激。
谢谢。
最佳答案
删除height: auto !important;行，它将起作用。