6

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

Sam Sedighian
  • 885
  • 1
  • 7
  • 21
  • your web page not working lol? – HaveNoDisplayName Jan 29 '15 at 00:17
  • the link seems broken... can you create a fiddle instead? Welcome to SO. – blurfus Jan 29 '15 at 00:18
  • @Piyush got the link to work now – Sam Sedighian Jan 29 '15 at 00:59
  • @ochi I can create a fiddle if this does not work – Sam Sedighian Jan 29 '15 at 01:01
  • @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? – blurfus Jan 29 '15 at 01:13
  • @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. – Sam Sedighian Jan 29 '15 at 01:27
  • I am sorry, I think I misunderstood. do you want a sticky footer on your page? regardless of content size (like this: http://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) – blurfus Jan 29 '15 at 01:31
  • @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: http://sedighian.github.io/blog/absolute_not_working.html and http://sedighian.github.io/blog/absolute_not_working2.html – Sam Sedighian Jan 29 '15 at 02:33

1 Answers1

7

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;   
}
Ansel Santosa
  • 8,224
  • 1
  • 28
  • 39
  • Interesting! the sticky footer solution for bootstrap, however, uses `position: absolute` so I wonder if there is probably more to it than that...? See http://getbootstrap.com/examples/sticky-footer/ – blurfus Jan 29 '15 at 00:23
  • 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 – Sam Sedighian Jan 29 '15 at 00:46
  • 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. – Ansel Santosa Jan 29 '15 at 00:50
  • 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 – Sam Sedighian Jan 29 '15 at 03:06
  • Edited again to reflect Bootstrap's CSS more closely. That will work in both cases. – Ansel Santosa Jan 29 '15 at 04:45