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 class="navbar"></div>
<div class="content"></div>
<div class="footer"></div>To handle this properly, we would need to have fixed heights for the navbar and the footer, only the content will have a dynamic height as the content changes on each part of the page. The CSS will be like this -
.navbar {
height: 50px;
}
.footer {
height: 100px;
margin-top: 50px;
}
.content {
min-height: calc(100vh - 150px - 50px);
}Keep in mind that I have not added CSS that is unnecessary for this tutorial, which you will be adding to the site like width: 100%;, etc. The calc() function is a really useful function as it allows us to perform arithmetics on values like %, px, em, etc. In the content class, we have min-height equal to the value of the whole Viewport Height(vh) minus the margin of the footer, height of the footer and the height of the navbar, which will guarantee that the content's height will always make sure the footer stays at the bottom of the page. That is it for this tutorial, I hope this helped some dev's who have come across this problem.