Главная » Сниппеты » Адаптивный футер страницы приклеенный к низу окна браузера

Адаптивный футер страницы приклеенный к низу окна браузера

Небольшой фрагмент кода (сниппет) css, с помощью которого, можно очень просто и надёжно «прибить», прижать (приклеить, sticky) футер страницы к низу окна браузера. Один из многочисленных способов, плох он или хорош, можно узнать только в сравнении и при реальном использовании на действующих или тестовых проектах.
 
Адаптивный футер прибитый к низу
 
Посмотрите на реализацию данного вида приклеенного футера, протестируйте его работу в различных браузерах на своих тестовых площадках.
 

 
Попробуйте изменять размеры окна браузера, футер будет автоматом подстраиваться под выбранный вами размер.

CSS

#content {
 padding-bottom: 100px;
}
#footer {
 position: absolute;
 bottom: 0;
 background-color:slategrey; 
 width:100%;   
 height: 80px;
 color: #ccc;
 text-align: center; 
}

С уважением, Андрей.

Удачи! Буду очень благодарен, если поделитесь ссылкой на запись в своих соц. сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. ilit70:

    Приклеивает... Но #content не растягивает. Итог: короткая страница «Длинная» страница

    Ответить
    • driver:

      Приклеивает, ещё как приклеивает)).

      В селекторе html, body {...} отключите height: 100%; и пропишите position: relative;, а в html { color: color: #000; } добавьте height: 100%; получится следующая картина:

      html, body {
          font-family: Arial,Helvetica,sans-serif;
          width: 100%;
          /* height: 100%; */
          margin: 0px;
          padding: 0px;
          font-size: 1em;
          position: relative;
      }
      html {
          color: #000;
          height: 100%;
      }
      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru