How can i make my footer stick to bottom?

Question

How can i make my footer stick to the bottom of the page with almost no content?

<footer>
<hr>
<p> &copy; 2017 Sindre Berge <p>
</footer>

Answer 1

Using CSS:

<style> 
footer {
    width:100%;
    position: fixed;
    bottom: 0px;
    text-align: center; /* This line is not needed but centers your text */
    }
</style>

<footer>
    <hr>
    <p> &copy; 2017 Sindre Berge <p>
</footer>

See it in action and play with it here: https://www.w3schools.com/code/tryit.asp?filename=FEO78PICTTQP

Or try the flex solution proposed by Sam. This will not cause the footer to not always be at the bottom of the browser view but instead at the bottom of the page.

Flex solution:

.flex-container {
   display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    /*I give height 700px but can be adapted to a body being 100%*/
    height:700px;
    background:#cccccc;
    }

.flex-content {
      -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    background:#ca33aa;
    height:100px;
    }

<div class="flex-container">
  <div class="flex-content">
This is my footer
  </div>
  </div>