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

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;   
}