Position footer at the bottom

Question

I would like to position the footer at the bottom of the page.

For example on the page where there\'s not much content, I still need the footer at the bottom, but if

Answer 1

This can be done using only CSS.

Here is the main part of a HTML file which contains nav, main and footer.

...
 ... 
 ... 
 ... 
...

In your CSS add the following lines

...
.main {
    ...
    min-height: calc(100vh - )
}
...

Now, if there is no content within main the min-height will make sure to make the main take the whole viewport and if there are any contents in the main, the min-height does not matter.