Absolute footer does not stick to scroll

Question

I am trying to make a footer that will adhere to the bottom of the page, instead I make it get stuck in the bottom position for the original window. When I scroll, I end up with a footer in the middle of the page.

I am not trying to fix it and stick on the page.

When I don’t have enough content to scroll, all is well. (at least it looks like that)

Relevant HTML:

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

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

, () . : sedighian.imtqy.com/blog/absolute_not_working.html sedighian.imtqy.com/blog/absolute_not_working2.html

Answer 1

. position: absolute :

. .

footer . , Bootstrap position: relative html.

, padding-bottom , .

Try:

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

body {
    padding-bottom: 40px;   
}