我希望我正在开发的移动网站上的页脚能够固定在页面底部。我找到了 CSS Sticky Footer example by Ryan Fait并付诸实现。在我可以想象测试的每个浏览器上，我发现页脚很好地粘在底部。
然后，它发生了。客户提示页脚到处都是。在痛苦地询问细节后，我发现问题只发生在一种型号的黑莓移动设备上:8250 型号。我拿出一个Windows VM，下载并安装了BlackBerry 8250模拟器，果然，我看到了问题所在。
对于两个 BlackBerry 屏幕高度的页面，页脚贴在第一个屏幕的中间，在其他所有内容之上。页脚在您滚动时不会移动，如果您向下滚动到页面的下半部分，则页脚不可见。它固定在顶部屏幕的中间。
我将把 HTML 和 CSS 贴到这个问题的末尾。如果我能得到任何关于为什么 8250 BlackBerry 型号会发生这种情况的指示或线索，尤其是如何修复它，我将非常感激。
谢谢!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
<style type="text/css">
* { margin: 0; padding: 0; }
html { height: 100%; }
body { height: 100%; }
.page {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.push {
height: 4em;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 4em;
margin-top: -4em;
text-align: center;
}
</style>
</head>
<body>
<div class="page">
<!-- lots of other DIVs here for actual content -->
<div class="push"></div>
</div>
<div id="footer">
<!-- footer content over here -->
</div>
</body>
</html>
我找到了这个 jQuery Sticky Footer破解。我不太确定这是否会成为人们建议我应该接受的东西。不过，我还没有测试过。
更新:这是一个小更新，表明我玩弄了上面链接的 jQuery Sticky Footer hack。它也不适用于提到的黑莓设备。
最佳答案
在尝试了几种不同的方法之后，我偶然发现了 CSSStickyFooter解决方案。我实现了它并发现它在有问题的黑莓设备上运行良好，以及我测试过的其他所有设备。我将在下面粘贴 HTML 和 CSS 代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
<title>Another CSS Sticky Footer that works on Black Berry</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.page {
width: 100%;
min-height: 100%;
}
.push {
padding-bottom: 4em;
overflow: auto;
}
#footer {
position: relative;
margin-top: -4em;
height: 4em;
clear: both;
background-color: red;
}
</style>
</head>
<body>
<div class="page">
<div id="content">
<p>Some body content will come here</p>
<p>And over here as well.</p>
</div>
<div class="push"></div>
</div>
<div id="footer">
<p>This is the footer block.</p>
</div>
</body>
</html>
关于CSS 粘性页脚在 8250 BlackBerry 设备上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4415748/