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

#html #css #позиционирование

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

Ответы

Ответ 1

футер прижимается вниз путём его абсолютного позиционирования и вытягивания высоты
родительских блоков: 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;
}

Разметка



    

        

            
Text
        
        
Text footer
    




Как-то так


Ответ 2

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


  
  
  
    

      
    
    

      
    
  



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


Ответ 3

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

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

html



  

    content
  
  




css

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


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

html


  

      content
    

  
  




css

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


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

html


  

    content
  
  




css

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


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

html


  

    content
  
  




css

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


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

html


  

    content
  
  




css

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