Footer with absolute position does not stick on scroll

Question

I am trying to do a footer that will stick to the bottom of the page instead I am getting it stuck to bottom position for the original window. When I scroll I end up having the footer stick in the middle of the page.

I am not trying to have it fixed and be sticky to the page.

When I do not have enough content to scroll all is well. (at least it looks that way)

Corresponding HTML:

<footer class="footer_div">
  <div class="container">
    <p>Sam Sedighian - No rights reseved!</p>
  </div>
</footer>

Corresponding CSS:

.footer_div {
  background-image: url("../imgs/dark_dotted2.png");
  color: #818787;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
  padding-top: 10px;
  text-align: center;
}

It needs to be at the bottom of the page without being sticky (fixed) and only visible when scrolled to the bottom of the page. So it should work for both these examples: sedighian.github.io/blog/absolute_not_working.html and sedighian.github.io/blog/absolute_not_working2.html

Induction

your web page not working lol? – Trillby

the link seems broken... can you create a fiddle instead? Welcome to SO. – Rechaba

@Piyush got the link to work now – Induction

@ochi I can create a fiddle if this does not work – Induction

@SamSedighian can you not simply remove position: absolute from the .footer_div class? then it will flow at the end of the content regardless of how much content you have. Is that what you are trying to achieve? – Rechaba

@ochi yes that would work but if I remove the Lorem Ipsum from the body of the blog post then I will have the footer in the middle of the page. Try it and you will see what I mean. But you are right in terms of that would give me what I want if the other case was not happening. – Induction

I am sorry, I think I misunderstood. do you want a sticky footer on your page? regardless of content size (like this: getbootstrap.com/examples/sticky-footer) - Or do you want a footer that always shows at the end of your content? (so if the content is short, it will show higher on the screen; if the content is long, it would show lower or even off the screen) – Rechaba

@ochi I am looking for a footer that you mentioned last. It should be at the bottom of the page without being sticky and visible at all times at the same time. So it should work for both these examples: sedighian.github.io/blog/absolute_not_working.html and sedighian.github.io/blog/absolute_not_working2.html – Induction

Answer 1

This is an extremely subtle bug. Read the position: absolute documentation carefully:

Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block.

footer does not have any positioned ancestors. Note that in the Bootstrap example, they explicitly declare position: relative on html.

In addition, you'll want to add a padding-bottom equivalent to the height of your footer so space is reserved for it.

Try:

html {
    min-height: 100%;
    position: relative;
}

body {
    padding-bottom: 40px;   
}

Refrangible

Interesting! the sticky footer solution for bootstrap, however, uses position: absolute so I wonder if there is probably more to it than that...? See getbootstrap.com/examples/sticky-footer – Rechaba

Actually I am not looking to have a fixed footer. I want the footer to just stay at the bottom of the page no matter how much content I have – Induction

In that case, you just have to move your CSS to the footer instead of the inner div. I could confirm this fix if you posted a link that worked. – Refrangible

The problem with this is that it does not work for both when I have content and not content in the main body of the blog post. Checkout the links I have added to the question to see what I am referring to – Induction

Edited again to reflect Bootstrap's CSS more closely. That will work in both cases. – Refrangible