CODEWITHSUNDEEP
csspositionsticky-footer
Sam Sedighian
Sam Sedighian

Reputation: 895

Footer with absolute position does not stick on scroll

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

Upvotes: 6

Views: 2093

Answers (1)

Ansel Santosa
Ansel Santosa

Reputation: 8444

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

Upvotes: 7

Related Questions