Here is a link of an example on codepen - Footer at the foot
As you're developing a site, you will come across a time when you have small amount of content on your page but you want a footer at the bottom, seems easy right? Just have position: fixed; bottom: 0;
, right? But that would make the footer stick to the bottom, even when you scroll, wait, we said that the content will not fill up the page anyway, so why is this not the solution? We won't normally have a problem if this was on a single page site but when it comes to multiple pages the footer will still be on the bottom obscuring some content whilst the user scrolls the page which would be, gawd, awful ux! This could be handled with some javascript too, but using javascript should be our last option, if we can fix it something with a hammer, we should fix it with hammer, no need to use a nailgun. In order to do this, we would need 3 divs in a container.
<div