Несколько способов того, как всегда прижимать footer к низу экрана.

1. Решение через абсолютное позиционирование для фиксированной высоты футера

CSS:

html {
  /* Растягиваем документ на всю высоту окна */
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  color: #fff;
  /* Растягиваем body по высоте html */
  min-height: 100%;
}

header {
   background: blue;
}

main {
   /* Выставляем отступ с высотой footer */
  padding-bottom: 30px;
  background: red;
}

footer {
  /* Позиционируем footer внизу main */
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Высота footer */
  height: 30px;
  background: black;
}

HTML:

<header role="banner">
  header
</header>
<main role="main">
  content
</main>
<footer role="contentinfo">
  footer
</footer>

2. Решение через Flexbox для адаптивной высоты футера

CSS:

body {
  margin: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
   background: blue;
}

main {
  /* Чтобы занимал оставшееся пространство */
  flex-grow: 1;
  background: red;
}

footer {
  /* Чтобы footer не уменьшался */
  flex-shrink: 0;
  background: black;
}

HTML:

<header role="banner">
  header
</header>
<main role="main">
  content
</main>
<footer role="contentinfo">
  footer
</footer>

3. Решение через таблицы для адаптивной высоты футера

CSS:

body {
  margin: 0;
  color: #fff;
  display: table;
  min-height: 100vh;
  width: 100%;
}

header {
   background: blue;
}

main {
  display: table-row;
  /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */
  height: 100%;
  background: red;
}

footer {
  background: black;
}

HTML:

<header role="banner">
  header
</header>
<main role="main">
  content
</main>
<footer role="contentinfo">
  footer
</footer>

4. Решение на нативном JavaScript для адаптивной высоты футера

JavaScript:

// Высчитываем высоту footer и делаем соответствующий отступ от main:
function footer(){
var
    main = document.getElementsByTagName('main')[0],
    footer = document.getElementsByTagName('footer')[0];

    footerHeight = footer.clientHeight;
    main.style.paddingBottom = (footerHeight)+'px';
}
window.addEventListener('load',footer);
window.addEventListener('resize',footer);

CSS:

html {
  /* Растягиваем документ на всю высоту окна */
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  color: #fff;
  /* Растягиваем body по высоте html */
  min-height: 100%;
}

header {
   background: blue;
}

main {
   /* Выставляем отступ с высотой footer по умолчанию */
  padding-bottom: 30px;
  background: red;
}

footer {
  /* Позиционируем footer внизу main */
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Высота footer по умолчанию */
  height: 30px;
  background: black;
}

HTML:

<header role="banner">
  header
</header>
<main role="main">
  content
</main>
<footer role="contentinfo">
  footer
</footer>

5. Решение через calc() для фиксированной высоты футера

CSS:

html {
  /* Растягиваем документ на всю высоту окна */
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  color: #fff;
  /* Растягиваем body по высоте html */
  min-height: 100%;
}

header {
   background: blue;
}

main {
   /* Выставляем отступ с высотой footer и header */
  min-height: calc(100vh - 30px - 18px);
  background: red;
}

footer {
  /* Высота footer */
  height: 30px;
  background: black;
}

HTML:

<header role="banner">
  header
</header>
<main role="main">
  content
</main>
<footer role="contentinfo">
  footer
</footer>

6. Решение через Grid Layout для фиксированной высоты футера

CSS:

html {
  height: 100%;
}

body {
  margin: 0;
  color: #fff;
  /* Растягиваем body по высоте html */
  min-height: 100%;
  display: grid;
  grid-template-rows: [row1] 18px [row2] 1fr [row3] 30px;
  grid-template-areas:
"header"
"main"
"footer";
}

header {
  background: blue;
  grid-area: header;
}

main {
  background: red;
  grid-area: main;
}

footer {
  background: black;
  grid-area: footer;
}

HTML:

<header role="banner">
  header
</header>
<main role="main">
  content
</main>
<footer role="contentinfo">
  footer
</footer>