0

I just found out about position sticky in CSS. I thought this is really cool and eliminates the need of writing a JS function for this simple behaviour.

So, I thought I give it a try. In the following example the header is sticking to the top, but I don't understand why the footer is not sticking to the bottom:

body {
  height: 180vh;
  padding: 0;
  margin: 10px 0;
}

header,
footer {
  position: -webkit-sticky;
  position: sticky;
  padding: 10px;
  color: #ffffff;
  text-align: center;
}

header {
  top: 0;
  background-color: brown;
}

footer {
  bottom: 0;
  background-color: #2d3142;
}
<header>I'm sticking to the top of the page</header>
<footer>I'm sticking to the Bottom of the page</footer>

Why is that?

Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
user1941537
  • 6,097
  • 14
  • 52
  • 99
  • 2
    Possible duplicate of [css sticky - not sticky to bottom of parent](https://stackoverflow.com/questions/54609208/css-sticky-not-sticky-to-bottom-of-parent) – Mike Doe Mar 15 '19 at 14:24

1 Answers1

-1

I'm not sure about sticky but if all you are trying to do is put your footer at the bottom you can try this.

.alwaysBottom {
    position: absolute;
    bottom: 0;
}
Marty G
  • 39
  • 4
  • The user is looking for a footer that is constantly at the bottom of the browser, this just places it at the bottom of the page. So if they scroll it wont always be in the viewport – Matt Pengelly Mar 15 '19 at 14:56