1

作業中のモバイルサイトのフッターをページの下部に貼り付けたいと思いました。RyanFaitによるCSSStickyFooterの例を見つけて、実装しました。おそらくテストできるすべてのブラウザーで、フッターが下部にうまくくっついていることがわかりました。

そして、それが起こりました。クライアントは、フッターがいたるところに投げ込まれていることに不満を漏らしました。苦労して詳細を要求したところ、問題が発生したのは、BlackBerryモバイルデバイスの1つのモデルである8250モデルのみであることがわかりました。Windows VMを取り出し、BlackBerry 8250シミュレーターをダウンロードしてインストールしましたが、確かに問題が発生しました。

2つのBlackBerry画面の高さのページの場合、フッターは最初の画面の中央、他のすべての上に固定されます。スクロールしてもフッターは移動しません。ページの下半分までスクロールすると、フッターは表示されません。トップ画面の中央に固定されたままです。

この質問の最後にHTMLとCSSを投稿します。なぜこれが8250BlackBerryモデルで起こっているのか、そして特にそれをどのように修正できるのかについての指針や手がかりを得ることができれば、私は非常に感謝しています。

ありがとうございました！

<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>

このjQueryStickyFooterハックを見つけました。これが私が一緒に行くべきだと人々が提案するものになるかどうかはあまりわかりません。ただし、まだテストしていません。

更新：これは、すぐ上にリンクされているjQueryStickyFooterハックをいじったという小さな更新です。前述のBlackBerryデバイスでも機能しませんでした。

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 に答える