Question

我想在我正在努力的移动网站上粘贴页面底部的页脚。我找到了CSS Sticky Footer example by Ryan Fait并实现了它。在我可以想象的每个浏览器上，我发现页脚很好地贴在底部。

然后它发生了。客户抱怨页脚在整个地方投掷。在痛苦地请求详细信息时，我发现问题仅发生在一个型号的BlackBerry移动设备上：8250型号。我拿出一个Windows VM，下载并安装了BlackBerry 8250模拟器，果然，我看到了这个问题。

对于两个BlackBerry屏幕高度的页面，页脚会粘贴到第一个屏幕的中间位置，而不是其他所有屏幕。滚动时页脚不会移动，如果向下滚动到页面的下半部分，页脚将不可见。它固定在顶部屏幕的中间。

我会将HTML和CSS发布到这个问题的最后。如果我能得到关于为什么在8250黑莓机型上发生这种情况的任何指示或线索，尤其是它如何修复，我将非常感激。

谢谢！

<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。它也不适用于所提到的BlackBerry设备。

Answer 1

在尝试了几件不同的事情之后，我偶然发现了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>

CSS粘性页脚在8250 BlackBerry设备上不起作用

1 个答案: