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

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

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

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

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

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

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

HTML

<div class="header">
        Header
</div>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<div class="footer">
        Footer
</div>

CSS

body {
        margin: 0;
        padding: 0;
}
.wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.content {
    flex: 1 0 auto;
}

.footer {
     flex: 0 0 auto;
}

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

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

HTML

<div class="wrapper">
<div class="header">
        Header
</div>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<div class="footer">
        Footer
</div>
</div>

CSS

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
.wrapper {
    min-height: 100%;
    position: relative;
}
.content {
    padding-bottom: 70px;
}
.footer {
    height: 70px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

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

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

HTML

<div class="wrapper">
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<div class="footer">
        Footer
</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
.content {
  min-height: calc(100vh - 70px);
}
.footer {
 height: 70px;
}

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