Adding a footer that is always displayed at bottom of screen?

You're after a "sticky footer", this article shows some of the techniques you can use:

Here's the flexbox version: http://codepen.io/chriscoyier/pen/RRbKrL

HTML:

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS:

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

use the following css properties:

position: fixed;
bottom: 0px;

Related