Force my footer on the bottom of the screen even if content is not big enough (without being sticky)

I have a very simple question: When my content is not high enough to fill up the screen, the footer comes up and it looks a bit messy. You can see it here on a regular laptop monitor: http://www.dlgt.co

On that page, what would be the trick to force the footer to stay low ? I do not want it to be sticky though. I tried to set a min-height: 100% on the content container (#loading_effect) without success. Looks like a specific min-height in px works, but this is not going to work on all monitors.

Thanks !

Solution

Try adding height: 100% to the html, body and your main content. This moves the footer just outside of the screen. By adding a negative margin-bottom equal to the height of your footer to the main content you move the footer upward again. See http://codepen.io/ckuijjer/pen/wbony for an example

Edit: Ok, that didn't work completely. Retry using min-height: 100%, box-sizing: border-box and a padding-bottom equal to the height of your footer. See http://codepen.io/ckuijjer/pen/jFgwd