You can use position: fixed; bottom:0; for the footer and it is always at the bottom of your screen.

I am building a website with a relative footer (first picture) but as you can see the footer is not placed at the bottom when there is not enough content on the page.

I could resolve it with position absolute but then the content of the page is hidden behind the footer (picture 2).

My question

How can I put the footer on the bottom of the page but still push it down when there is more content added to the page.

Thank you for the help.