Как прижать footer к низу страницы с помощью CSS?

Привет. На связи Шевченко Вячеслав, и сегодня мы поговорим о проблеме с которой сталкиваются 101% верстальщиков и разработчиков. А именно, необходимость прижать футер к низу страницы.

Суть в том, чтобы высота главного блока с контентом равнялась высоте окна браузера, и если содержимое не велико, footer должен быть внизу окна. После наполнения страницы он должен располагаться после главного блока.

Благо в 2017 году уже есть не один способ реализации данной задачи. И в этой статье я вас познакомлю с ними.

Для примеров я буду использовать самую простую разметку страниц, состоящую из нескольких блоков. И так начнем.

Способ первый. Прижатие footer с помощью css свойства flex.

Этот способ отлично подходит для макетов с динамической высотой footer, и является наиболее подходящим и актуальным для данного времени. В отличии от следующих которые основаны на фиксированной высоте.

HTML

CSS

Способ второй. С помощью абсолютного позиционирования

Основан на абсолютном позиционировании footer и его фиксированной высоты. Для body необходимо задать height: 100%, блоку .wrapper min-height: 100%. Если мы зададим height, то мы ограничим блок по высоте, если контента будет много. Футер прижимаем к низу с помощью position: absolute и bottom: 0, так же добавляем height: 70px и отступ padding-bottom: 70px; элементу .content который равняется высоте футера.

HTML

CSS

Способ третий. С помощью css функции calc()

Этот способ отличается от двух предыдущих, в нем мы используем единицы измерения vh и css функцию calc(), так же как и во втором способе footer должен быть фиксированной высоты. С поддержкой браузерами calc() вы можете ознакомится на сайте caniuse. Я ранее публиковал пост о calc функции, рекомендую к прочтению.

HTML

CSS

Я надеюсь эти три способа помогут вам прижать футер к низу окна браузера в ваших проектах.
Если статья оказалась полезной для вас, поддержите ресурс и поделитесь ей с социальных сетях.
Не пропустите новые статьи, подписывайтесь в группы facebook и vkontakte. До встречи в новых статьях!

comments powered by HyperComments