Pull to refresh

Прилипающий футер с не фиксированной высотой Css+Javascript

CSS *
В ответ на комментарий из поста про прилипающий футер.
… большой недостаток — фиксированная высота

Привожу пример исправления этого недостатка.

Html ничем не отличается
  <div id="wrap">
      <div id="main">
        If юзер звонИт,<br>
        then быть перебранке;<br>
        If спам в Outlook повалил спозаранку,<br>
        Then сослуживцы сегодня скучают,<br>
        And юзера им не докучают.<br>
    </div>
  </div>
 
  <div id="footer">
    When до обеда ещё полувечность<br>
    Loop мой keyboard стучит бесконечно,<br>
    Мышки щелчки заглушают дыхание,<br>
    На мониторе застыло внимание.<br>
    Личная жизнь превращается в коды,<br>
    В мыслях только РАБОТА, РАБОТА.<br>
    If на досуге без сна и заботы<br>
    Захочется вновь побыстрей на работу,<br>
    Then вирус программщины вас захватил<br>
    And нет бороться желанья и сил,<br>
    And срочно увольтесть, сказать не забыв:<br>
    End if;<br>
    End loop;<br>
    End if;<br>
    End if;
  </div>


Css код
* {
margin: 0;
padding: 0;
/*Можете воздержаться от комментариев по поводу такого сброса стилей,
в примере проще показывать так*/

}
 
html, body {
  height: 100%;
}
 
#wrap {
  position: relative;
  min-height: 100%;
  background-color:#ccc;
}
 
* html #wrap {
  height: 100%;
/*Выносите стили для ИЕ в отдельный файл или делайте так как вам удобно,
здесь все вперемешку для наглядности*/

}
 
#main {
                  /*css*/
}
 
#footer {
  position: relative;
  background-color:#dcd8cb;
  zoom:1;/*Решает некоторые проблемы в ИЕ6-7, в частности проблему с отображением bg-color*/
}


Javascript, решающий проблему с фиксированностью футера
function resize() {
var foot = document.getElementById('footer');
var footHeight = foot.offsetHeight;
foot.style.marginTop = -footHeight+"px";
document.getElementById('main').style.paddingBottom = footHeight+"px";
}
 
window.onload = resize;

За яваскрипт не бейте, в нем ещё не силен, только в процессе углубленного изучения. Предложения по улучшению принимаются

Ну и конечно же необходимо предусмотреть вариант если яваскрипт отключен. Мне более удобным кажется вот этот:
<noscript>
<style type="text/css">
#main {
padding-bottom:80px;
}
 
#footer {
min-height:80px;
margin-top:-80px;
}
 
* html #footer {
height:80px;
}
</style>
</noscript>


Скачать пример (1.18 KB)
Это всего лишь демонстрация как можно сделать совсем немного помучившись. Как сделаете вы — ваше личное право.

_________________________
Замечательный пример, который будет работать в браузерах, понимающих свойство display: table-row; автор SelenIT
Tags: csssticky footerfooter
Hubs: CSS
Total votes 13: ↑8 and ↓5 +3
Comments 38
Comments Comments 38

Popular right now