8

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

1

3 ответа 3

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>

Как-то так

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

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

<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 для футера.

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

То что вы хотите сделать, называется 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>

2
  • 1
    Какой из этих способов используете вы? Какой более универсальный для большинства браузеров?
    – GuitarFan
    2 сен 2016 в 15:07
  • Наиболее современный и простой способ это 4. flexbox . Но, как и все новое, его не поддерживают старые браузеры webref.ru/css/flex . В проектах не требующих широкой поддержки браузеров, я использую его. Наиболее универсальные и кросбраузерные методы 1 и 2, через отрицательные margin-ы. 5 сен 2016 в 13:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.