Фиксирование футера внизу страницы

18 мая 2016 г. 10:23

Эта статья посвящена распространенной проблеме: при высоте контента меньше высоты окна браузера футер(footer) "подскакивает" вверх.

Ниже показан способ, который не зависит от сложности вёрстки и работает во всех популярных браузерах. Для примера пусть наша страница состоит из двух блоков: main и footer.

Пример разметки страницы:

    <div id="main"> 
      Main block
    </div> 
    <div id="footer"> 
      Footer
    </div> 
     

Для решения проблемы, во-первых, зададим элементам html и body высоту в 100%, а также для блока main установим минимальную высоту в 100% (то есть растянем его на всю высоту экрана), а футеру зададим фиксированную высоту, например 50px.

    html, body {
      height : 100%;
    }
    #main {
      min-height: 100%;
    }
    #footer {
      height: 50px;
    } 
    

Схематически наша разметка сейчас выглядит так: Теперь при помощи отрицательного значения margin-top для футера "въезжаем" в основной блок, причем margin-top должен соответствовать высоте футера, то есть при нашей высоте футера (50px) margin-top будет равен -50px. Это необходимо для того, чтобы высота страницы составляла 100% высоты экрана. При таком расположении элементом возможны накладки контента на футер. Для избежания этой проблемы добавим пустой блок в конец блока main и зададим ему высоту равную высоте футера, то есть в нашем случае 50px. Схематически страница будет иметь следующий вид:

Разметка будет иметь такой вид:

    <div id="main"> 
      Main block
      <div id="hFooter"> </div> 
    </div> 
    <div id="footer"> 
      Footer
    </div> 
    

Стили:

    html, body {
      height : 100%;
    }
    #main {
      min-height: 100%;
    }
    #footer {
      height: 50px;
    }
    #hFooter {
      height: 50px;
    }  
     

Summary
  • 1. Установить height: 100% для элементов html, body
  • 2. Установить min-height: 100% для основного блока
  • 3. Установить фиксированную высоту для футера
  • 4. Задать отрицательный margin-top для футера в соответствии с его высотой
  • 5. Добавить пустой элемент в конец основного блока и задать ему высоту как минимум равную высоте футера

× Внимание! Введите Ваше имя, пожалуйста.

Комментарии

markus

27 января 2021 г. 15:25

aPFBRD https://buyzudena.web.fc2.com/

markus

27 января 2021 г. 14:37

AtQRiZ https://buyzudena.web.fc2.com/

markus

26 января 2021 г. 19:19

lUw8rN https://beeg.x.fc2.com/

markus

26 января 2021 г. 17:17

jsRWRX https://beeg.x.fc2.com/

johnanz

9 января 2021 г. 18:25

BI4uFR http://waldorfdollshop.us/ waldorf doll

johnanz

9 января 2021 г. 16:30

kXcG0C http://waldorfdollshop.us/ waldorf doll

dobson

9 января 2021 г. 14:06

I1IhpZ https://writemyessayforme.web.fc2.com/octavio-paz-essay-day-of-the-dead.html

dobson

9 января 2021 г. 12:14

ShEIYo https://writemyessayforme.web.fc2.com/octavio-paz-essay-day-of-the-dead.html

dobson

15 декабря 2020 г. 08:11

qSZs6Y https://writemyessayforme.web.fc2.com/#writemyessay

dobson

15 декабря 2020 г. 07:40

quCj9J https://writemyessayforme.web.fc2.com/#writemyessay

dobson

13 декабря 2020 г. 07:11

vsd9Rr https://writemyessayforme.web.fc2.com/

dobson

13 декабря 2020 г. 06:41

Ev4BBf https://writemyessayforme.web.fc2.com/

johnan

12 декабря 2020 г. 22:25

niwqrX http://xnxx.in.net/ xnxx videos

johnan

12 декабря 2020 г. 22:07

HSPHIr http://xnxx.in.net/ xnxx videos

dobson

4 декабря 2020 г. 01:20

3oFgSl https://www.quora.com/What-the-top-SEO-keywords-for-essay-you-know/answer/Alan-Smith-1772 write my essay

dobson

4 декабря 2020 г. 01:08

DQ1RN1 https://www.quora.com/What-the-top-SEO-keywords-for-essay-you-know/answer/Alan-Smith-1772 write my essay

Antoine

13 ноября 2020 г. 18:37

Конкуренция на рынке онлайн гемблинга невероятна. Каждый день появляется немало площадок с соблазнительными спецусловиями для новичков. Особенного интереса удостаивается первоначальный бонус, который оценили многие пользователи. Настала пора понять важные моменты, которые сопряжены с работой casino. Стартовый бонус – это основное поощрение, которое предоставляет онлайн-casino. Чтобы его получить, не придется прилагать серьезных стараний. Пособие приготовлено для игроков, которые только впервые открывают личный кабинет на портале казино 1win на андроид Геймеры часто даже не представляют, какой сюрприз приготовили программисты. Наиболее часто первое поощрение прибавляет определенный процент к стартовому счету вне зависимости от количества внесенных денег. Бонус безвозмездных спинов Casino внедряют бесплатные вращения в свою маркетинговую стратегию. Что это такое? Такой подход дает пользователям бесплатные циклы, которые геймеры имеют право использовать в игровых аппаратах, и выигрыши обычно могут быть сняты с личного счета. Спины чрезвычайно востребованы в среде почитателей азартных онлайн-игр, так как они позволяют изучить возможности, которые обеспечивают новейшие гейм аппараты, с исключением потребности пополнять персональный баланс и растрачивать личные финансы. Достаточно интересное предложение, которым в полной мере смогут воспользоваться игроки. Несложно оценить по достоинству имеющиеся плюсы, шансы, предоставляемые разработчиками. Kazino таким образом нередко рекламируют новые услуги среди посетителей, зарегистрированных на их портале. При этом https://1win.guru не ограничено ни для одного из желающих. Нужно всего лишь выбрать определенный раздел, ввести данные в поля регистрации. Важно не забывать про обязательность подтверждения достижение совершеннолетия. Без верификации будет сложно стать постоянным пользователем, которому откроются потенциальные возможности on-line ресурса. Бонусы для пришедших по рекомендации Online казино поощряет пользователей, которые советуют игровую площадку потенциальным игрокам. Бонусы за вовлечение друзей делаются с целью популяризации предложений игр и притягивания новых клиентов казино. Данный способ считается наиболее эффективным для увеличения числа игроков. Один момент, когда человек думает стать полноценным участником, ориентируясь на рекламу. Совершенно другое – воспользоваться советом приятеля, который на сегодня убедился в правдивости данных, вариативности игровых аппаратов. За рекомендацию пользователь может обнаружить в личном кабинете денежный приз. Финансовый бонус можно снять со счета или использовать на бесплатные вращения в игровых раундах (отдельные cazino имеют свои свои собственные рекламные и бонусные программы, поэтому лучше всего сначала изучить правила). Каким образом можно получить этот бонус https://1win.guru Вы должны сагитировать кого-то из своих знакомых пройти регистрацию на игровом портале, активировать аккаунт и внести депозит. Во время прохождения регистрации этот человек должен внести ваши данные в качестве реферала, чтобы Вы могли зачислить на счет вознаграждение. Количество приглашенных игроков не ограничено. Игровые площадки всегда рады новичкам, которые намерены стать постоянными в самое ближайшее время. Бонус за лояльность Бонусы лояльности – это дополнительный тип подарков, которые используются в онлайн-casino 1вин 1win ставки Они похожи на достаточно распространенные схемы лояльности, которыми руководствуются известные магазины. Таким образом casino поощряет своих приверженцев (пользователей, которые регулярно заходят на площадку и вступают в игру) заманчивыми бонусами или подарками. Подобный сюрприз возможен в форме поощрительных спинов, однако многие игровых платформ также дают небольшие гаджеты, подарки или лотерейные билеты. Можно сказать, что появится возможность получить намного больше положительных впечатлений в течение пребывания на online-площадках. Поощрительные призы для VIP-пользователей Игровые сервисы в том числе готовят бонусы для игроков, которые регулярно заходят на сайт казино и используют в играх большие денежные суммы. Большая часть онлайн-casino стараются пообщаться с ВИП-клиентами , чтобы узнать об их интересах и присудить вознаграждения, которые фактически отвечают поведенческому фактору заинтересованного игрока. Это лишний раз подтверждает, в какой мере рады приветствовать клиентов онлайн-заведения. Для ВИП-геймеров многие online-казино подготавливают значительные материальные поощрения. Нужно всего лишь продолжать заходить в выбранное заведение, пользоваться всеми предоставляемыми преимуществами своего положения.

dobson

8 октября 2020 г. 18:00

EGP8gQ http://pills2sale.com/ cheap viagra

dobson

8 октября 2020 г. 16:57

alsePa http://pills2sale.com/ cheap viagra

Алексей Р.

7 июня 2016 г. 16:17

Александр, из-за того, что на мобильных девайсах плотность пикселей выше, чем на десктопе, смотреться всё будет очень хорошо))) Можешь проверить, как смотрится этот сайт на мобильном=) Вот неплохая статья на хабре https://habrahabr.ru/post/229359/

Александр Л.

7 июня 2016 г. 16:04

У меня вопросик на счет фиксированной высоты футера, как данная конструкция себя будет вести на мобильных устройствах и планшетах, ведь для их экрана 50px будет многовато

Последние посты

18 мая 2016 г.

Фиксирование футера внизу страницы

22 декабря 2015 г.

Особенность модального окна Bootstrap

18 декабря 2015 г.

Основы Bootstrap

Последние комментарии

14 апреля 2021 г. 19:06

best price 100mg generic viagra https://goviagarato.com - order generic viagra viagra prices best male enhancement pill viagra professional viagra connect

13 апреля 2021 г. 19:58

dissertation economics https://dissertationlines.com - thesis finder dissertation book printing dissertation chapter 4 dissertation committee how to write a dissertation introduction

12 апреля 2021 г. 15:39

buy college research paper https://researchpapero.com - sample of research paper outline research paper thesis research paper writing help thesis writing service examples of apa research paper