Как сделать что бы footer постоянно был закреплен внизу страницы?

Question

[nluparev]

Привет.

Вот страница codepen.io/SuperManEver/full/jWPWGq
как сделать так что бы footer был всегда снизу, в настоящее время есть пустое пространство между нижней границей footer'a и нижней границей видимой области браузера. Да еще кое-что, поскольку я использую некоторые Responsive свойства Bootstrap здесь, при изменении ширины экрана нижняя пустая область меняется в высоте. Можно сделать так что footer был постоянно приклеен в низу страницы ?

Заранее спасибо.

Answer 1

[Serj-One]

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: $footer-height;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: $footer-height;
}

Answer 2

[Сергей Вирченко]

добавь:
body {min-height: 100vh;position: relative}
footer {posiotion: absolute; bottom: 0; left: 0;}

и для .main сделай внизу отступ, чтобы футер не налазил

Answer 3

[Vadim Bogomazov]

Sticky Footer