-1

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.

J.vee
  • 623
  • 1
  • 7
  • 26

1 Answers1

-1

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

S. Hesam
  • 5,266
  • 3
  • 37
  • 59
  • If you still have problem with overlaping content over footer, you can set `z-index` of footer greater than content of page. You can use `z-index: 100` if you didn't touch any z-index on other elements – Abdulah Proho Apr 20 '20 at 14:03