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 you have read our privacy policy.

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