Липкий нижний колонтитул CSS не работает на устройстве 8250 BlackBerry - PullRequest
Новая
       4

Липкий нижний колонтитул CSS не работает на устройстве 8250 BlackBerry

1 голос
/ 11 декабря 2010

Я хотел, чтобы нижний колонтитул на мобильном сайте, над которым я работал, придерживался нижней части страницы. Я нашел пример 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 взломать. Я не слишком уверен, будет ли это то, что люди предложили бы мне пойти. Я еще не проверял это.

Обновление: это небольшое обновление, чтобы сказать, что я играл с хакером jQuery Sticky Footer, связанным прямо выше. Он также не работал для упомянутого устройства BlackBerry.

1 Ответ

0 голосов
/ 14 декабря 2010

После нескольких попыток я наткнулся на решение 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>
...