footer which is relative but in the bottom of the page

css-footer-at-bottom.css

/* for Boostrap, footer can be implemented like

<footer>
  <div class="container">
    <hr>
    Footer text
  </div>
</footer>

*/

html {
    height: 100%;
}
body {
    min-height: 100%;
    position: relative;
}
body:after {
    content: '';
    display: block;
    height: 80px;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
}