1

我希望我正在开发的移动网站上的页脚能够固定在页面底部。我找到了Ryan Fait 的 CSS Sticky Footer 示例并实现了它。在我可以想象的测试的每一个浏览器上，我发现页脚很好地贴在底部。

然后，它发生了。客户抱怨页脚到处乱扔。在痛苦地询问详细信息后，我发现问题仅出现在一种型号的 BlackBerry 移动设备上：8250 型号。我拿出一个 Windows 虚拟机，下载并安装了 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 hack。我不太确定这是否会成为人们建议我应该接受的事情。不过，我还没有测试过。

更新：这是一个小更新，说明我玩弄了上面链接的 jQuery Sticky Footer hack。它也不适用于提到的黑莓设备。

4

1 回答 1

0

在尝试了几件不同的事情后，我偶然发现了CSSStickyFooter解决方案。我实现了它，发现它在有问题的 Black Berry 设备上运行良好，以及我测试过的所有其他设备。我将在下面粘贴 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>
于 2010-12-14T17:54:08.780 回答