2014-01-16 4 views
2

Я занимаюсь созданием мобильного сайта, ориентированного на развивающиеся страны, а это значит, что большинство мобильных телефонов будут более старыми телефонами с использованием довольно простых браузеров с ограниченной поддержкой CSS и, как правило, нет javascript.Решение для фиксированных нижних колонтитулов для старых браузеров

Одна из вещей, которую я пытаюсь достичь, - это решение с фиксированным нижним колонтитулом, которое будет поддерживаться в старых браузерах.

С помощью этого сайта Я нашел ссылку на это решение Ryan Fait Sticky Footer, который казался хорошим в теории, но который я не могу заставить работать.

Вот мой jsfiddle, который является моим пониманием того, как код должен быть реализован. Был бы признателен, если бы вы могли бы посмотреть и дайте мне знать, что (если что-нибудь) я делаю неправильно

Jsfiddle

Вот мой частичный код;

HTML код

<body> 
<div class="wrapper"> 
<p>Text</p> 
<div class="push"></div> 
<div class="footer">This is a test</div> 
</body> 

CSS

* {margin: 0;} 
html, body {height: 100%;} 
.wrapper {min-height: 100%;height: auto !important;height: 100%;margin: 0 auto -155px;} 
.footer, .push {height: 155px;} 
+0

'Решение для старых браузеров'? Какие браузеры? Сколько им лет? Что не правильно придерживаться «позиции: исправлено»? –

+0

BTW: Пожалуйста, не используйте '! Important' в CSS! http://james.padolsey.com/usability/dont-use-important/ –

ответ

2

Вы не закрыли оболочку DIV. Закройте это перед нижним колонтитулом. Смотрите новую скрипку.

http://jsfiddle.net/sF4EB/3/

Имейте в виду, что это не будет прилипать колонтитул в нижней части окна в любое время (вам нужно использовать position: fixed для этого), только в нижней части окна, если страница ISN» t достаточно высокий, чтобы подтолкнуть его туда, иначе он останется внизу контента.

+0

Благодарим вас за решение и пояснения. К сожалению, позиция: исправлено не для меня из-за отсутствия поддержки в старых браузерах. –

Смежные вопросы