Как правильно позиционировать footer на сайте?

Question

На сайте есть header, content и footer блоки. У content на разных страницах разная высота, бывает что высота меньше чем body и тогда шапка находится не внизу страницы а выше. Как правильно позиционировать футер? Нужно ли устанавливать минимальную высоту для content чтобы прижать footer к низу? Хотя минимальную высоту я установить не могу, так как высота на разных устройствах разная. Как поступать в таких случаях?

Возможный дубликат вопроса: Как всегда прижимать footer к низу экрана? — , Feb 15 '17 at 13:54

score 6 · Accepted Answer · edited May 11 '23 at 14:09

6

футер прижимается вниз путём его абсолютного позиционирования и вытягивания высоты родительских блоков: html, body и блока с классом .wrapper на 100%. При этом конкретному блоку .content необходимо задать нижний отступ, который равен или больше высоты футера, в противном случае последний закроет часть содержимого.

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

<html>

<body>
  <div class="wrapper">
    <div class="content">
      <p>Text</p>
    </div>
    <div class="footer">Text footer</div>
  </div>
</body>

</html>

Как-то так

edited May 11 '23 at 14:09

Dev18

640

answered Sep 02 '16 at 09:55

ChromeChrome

1,526

я иногда использую вот этот метод, но он работает только в современных браузерах * { margin: 0; padding: 0; } .content { min-height: calc(100vh - 80px); } но тут надо знать конретную высоту футера – ChromeChrome Sep 02 '16 at 10:02
Спасибо, видимо первый способ предпочтителен, раз работает в большем количестве браузеров. position: relative; для wrapper зачем нужен? А так же меня интересует почему именно absolute использовано для футера? Понятно что это нужно чтобы сделать отсчет от нижнего края род. блока, но при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Это не мешает? Это значит что блок как бы идет поверх контента и остальные элементы были бы под ним, если бы не padding у контента? – GuitarFan Sep 02 '16 at 15:28

score 6 · Answer 2 · answered Sep 02 '16 at 10:11

Пользуюсь таким методом:

<html class="with-sticky-footer">
  <head>
  </head>
  <body>
    <div class="body-before-footer">
      <!-- Ваш основной контент -->
    </div>
    <footer>
      <!-- Контент футера -->
    </footer>
  </body>
</html>

Класс with-sticky-footer - чтобы не перегружать стандартные стили html и body, так как футер может встречаться не на всех страницах сайта.

Стили:

html.with-sticky-footer {
  height: auto;
  min-height: 100%;
  position: relative;
}
html.with-sticky-footer body {
  height: auto;
  margin-bottom: 100px;
  position: initial;
}
html.with-sticky-footer .body-before-footer {
  background: #fff;
}
html.with-sticky-footer footer {
  bottom: 0;
  height: 100px;
  min-width: 100%;
  position: absolute;
}

Цвет background: #fff; у .body-before-footer задается такой же, как у body. Это помогает, если вы хотите расположить футер фиксированно и как бы "под" контентом. Посмотрите, как это реализовано здесь: http://rubycourses.ru/. Я просто задал цвет для .body-before-footer и position: fixed для футера.

По поводу вашего примера: Зачем у html position: relative, у body position: initial? И собственно у футера absolute? На сколько я знаю при абсолютном позиционировании все HTML элементы ведут себя так, будто абсолютно позиционированного элемента в потоке нет. То есть футер будет как бы отдельно от всех элементов, возможно поверх них. Так же не ясно зачем футеру min-width: 100%; — GuitarFan, Sep 02 '16 at 15:19

score 6 · Answer 3 · edited May 11 '23 at 14:09

То что вы хотите сделать, называется Sticky Footer (липкий футер). Существует множество способов реализовать подобное поведение.

##1. Отрицательный margin у footer-а

html,
body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>

##2. Отрицательный margin у content

html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

<body>
  <div class="wrapper">
    content
    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>

##3. С помощью calc()

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

##4. Через свойство flexbox

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

##5. Через свойство grid

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

Какой из этих способов используете вы? Какой более универсальный для большинства браузеров? — GuitarFan, Sep 02 '16 at 15:07
Наиболее современный и простой способ это 4. flexbox . Но, как и все новое, его не поддерживают старые браузеры https://webref.ru/css/flex . В проектах не требующих широкой поддержки браузеров, я использую его. Наиболее универсальные и кросбраузерные методы 1 и 2, через отрицательные margin-ы. — Alexey Prokopenko, Sep 05 '16 at 13:33

Как правильно позиционировать footer на сайте?

3 Answers3

Linked

Related