CSS position fixed bottom footer

Question

I am trying to fix my footer to the bottom, despite where I am on the page. I tried

.home-footer{
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 5;
}

but it only works if I take the footer outside of the body and position it right below the html element. How can I make this work while keeping it in the body?

EDIT I found the issue was that my body had transform: translateX(0). That seemed to be conflicting with the fixed footer, because as soon as I got rid of that, it worked. However, I need that rule, or else my slide in navigation breaks.

We'll need to see the rest of your HTML and CSS in order to tell what the problem is. — Hunter Turner, Jul 27 '16 at 14:15

score 1 · Answer 1 · answered Jul 27 '16 at 15:49

I found out the issue was a conflict between applying a transform to the body, and having a fixed footer. There appears to be an issue combining those two rules together like that. I resorted to using left positioning for my animation, rather than transform, and it fixed the issue. It's not ideal, but it worked.

score 0 · Answer 2 · edited Jul 27 '16 at 16:47

0

Add this to your CSS:

html, body {
  width: 100%;
  height: 100%;
}

edited Jul 27 '16 at 16:47

Paul Roub

36,322
27
84
93

answered Jul 27 '16 at 14:17

Eye webdesign

46
1
9

THat pushes it to the bottom initially, but then when I scroll down, it doesn't scroll with the page. – Jordan Carter Jul 27 '16 at 14:19
I think the answer is here -> http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom – Eye webdesign Jul 27 '16 at 14:29

score 0 · Answer 3 · 2016-07-27T14:30:38.853

0

Try this:

HTML:

<body>
  <div class="container">
    <footer>Your footer</footer>
  </div>
</body>

CSS:

// wrapper in your body, where your footer will be in
.container {
   position: absolute;
   top: 30px;
}

footer {
   position: relative;
   bottom: 0;
   width: 100%;
   height: 20px;
}

edited Jul 27 '16 at 14:30

answered Jul 27 '16 at 14:20

That isn't what I'm looking for. I want the CSS to always be visible on the screen, but the bottom. So, it will move as we scroll the page. – Jordan Carter Jul 27 '16 at 14:21
1

I updated my question. Basically it was an issue with transform being on the body, which seemed to conflict with the footer having position fixed. – Jordan Carter Jul 27 '16 at 15:48

CSS position fixed bottom footer

3 Answers3