Solution 1 :

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

Problem :

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.

enter image description here

enter image description here

Thank you for the help.


Comment posted by noobprogrammer

Can you share your HTML (i.e. the front end part)?

Comment posted by Abdulah Proho

If you still have problem with overlaping content over footer, you can set