0

I have a webpage https://jiwidi.me/home/ where I have a footer that I want to stay at the bottom of the page even if I inject html code with js code. The footer works at the main page https://jiwidi.me/home/ but wont wort at https://jiwidi.me/home/blog/ for example where it's not in the bottom. In the blog page I'm inserting html code live so that makes the dimensions of the page change.

My current footer css looks like this:

footer {
    clear: both;
    margin-top: -200px;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    text-align: center;
}

The footer should also stay centered.

Thanks!

eljiwo
  • 687
  • 1
  • 8
  • 29
  • Does this answer your question? [How to align content of a div to the bottom](https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom) – nyedidikeke Apr 16 '21 at 21:45
  • Please see: https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b There are a lot of examples to do that – Jason Van Malder Apr 16 '21 at 22:15

2 Answers2

0

You can just use the position fixed

footer {
    clear: both;
    margin-top: -200px;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    text-align: center;
}
Jonathan Southern
  • 1,121
  • 7
  • 22
0

You have to add position:relative; on your body element

body 
{
 position:relative; 
}

#photos
{
 margin-bottom:100px; 
}
Daniel Resch
  • 584
  • 3
  • 12
  • Hi, I went with that fix and now I discovered that the footer overlaps the previous element in html. For example in photos section https://jiwidi.me/home/photos/ the footer overlaps with the div containing al pictures. Is there any way to avoid this? – eljiwo Apr 18 '21 at 11:12
  • yes one way would be to add a margin-bottom to your #photos element I will add this in my answer, you might need to adjust the margin-bottom px value to your needs. – Daniel Resch Apr 18 '21 at 20:13