html - Make div stick to bottom of page

Question

So I made a contact page and I want the footer div to be sticking to the bottom of the page not right after the contact form.

But if I put everything to a container div with height:100%; and make footer bottom:0; then the page will be "too long", you have to scroll, etc...

My css so far:

#footer{
    background-color:#fff;
    font:bold 14px;
    color:#1E88E5;
    width:100%;
    height:auto;
    padding:1%;
    border-top:1px solid #1E88E5;
}

Footer is just a normal full width div with some centered text atm.

Answer 1

You can probably use position: fixed to achieve this.

.footer {
  position: fixed;
  bottom: 0;
}

With this you will need to offset the bottom of the page so would suggest adding a padding-bottom to .main that is the height of the footer.

.main {
  padding-bottom: 30px /*whatever the height of your footer is*/
}