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

Answer 1

Pritesh Gupta's solution works really well for me:

I'm copy+pasting the code in case their site goes down:

Here's the HTML:

  
    
  

  
    
stuff
    
© 2016
  

Here's the CSS:

body {
  margin: 0;
}

main {
  min-height: calc(100vh - 4rem);
}

footer {
  height: 4rem;
}

I don't know if it works in old browsers but I'm not so worried about that myself.

It also depends on you knowing the height of your footer, although it's worth pointing out that you don't necessarily have to set the height manually like in the code above since you can always figure out what it is if you know how much vertical padding and line-height the contents have...

Hope this helps, I spent most of the morning trying every single sticky footer tutorial on the web before stumbling across this technique and whilst other techniques do work this one requires minimal effort.