Я хотел, чтобы нижний колонтитул на мобильном сайте, над которым я работал, располагался внизу страницы. Я нашел пример CSS Sticky Footer от Райана Фейта и реализовал Это. В каждом браузере, который я мог протестировать, я обнаружил, что нижний колонтитул хорошо прилегает к нижней части.
А потом это случилось. Клиенты жаловались на то, что нижний колонтитул разбрасывался повсюду. Настойчиво выясняя подробности, я узнал, что проблема возникает только на одной модели мобильных устройств BlackBerry: модели 8250. Я вытащил виртуальную машину Windows, скачал и установил симулятор BlackBerry 8250 и, конечно же, увидел проблему.
Для страницы высотой в два экрана BlackBerry нижний колонтитул прикрепляется к середине первого экрана поверх всего остального. Нижний колонтитул не перемещается при прокрутке, и если вы прокрутите вниз до нижней половины страницы, нижний колонтитул не будет виден. Он остается фиксированным в середине верхнего экрана.
Я опубликую HTML и CSS в конце этого вопроса. Если бы я мог получить какие-либо указания или подсказки относительно того, почему это происходит на модели BlackBerry 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, ссылка на который приведена выше. Это не сработало и для упомянутого устройства BlackBerry.
