How to make sure the footer is always at the bottom? As an important note I do NOT mean position: fixed;!!!

When the body is smaller and does not take the full height of the browser size, the footer just likes to chill in the middle of the page. If you look in the photo I shared you can see more clearly what I mean. I've tried things like body{height: 100%;} to no avail. Even attempted this: https://css-tricks.com/snippets/css/sticky-footer/ and it seemed to just break it more (especially on the front page where this isn't a problem. Is there possibly a way to make sure the body size is at least the size of the browser always?
You can make use of the calc() expression, and use min-height instead of height. Say your footer height is 100px:

body{
  min-height : 100%;
  min-height: -moz-calc(100% - 100px); /* Firefox */
  min-height: -webkit-calc(100% - 100px); /* Chrome, Safari */
  min-height: calc(100% - 100px); /* IE9+ browsers */
}
footer{
  height: 100px;
}


Get more info about calc() here