1

In my example below, you can see the sticky top is working perfectly well(scroll down) but the bottom is not.

Can someone explain why the bottom would not stick?

Thank you

#test {
  display: flex;
}

#top {
  position: sticky;
  top: 0;
}

#bottom {
  position: sticky;
  bottom: 0;
}
<div id="test">
  <div id="col1">
    test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
  </div>
  <div id="col2">
    <div id="top">top</div>
    <div id="bottom">bottom</div>
  </div>
</div>
Huangism
  • 16,278
  • 7
  • 48
  • 74
  • Does this help? https://stackoverflow.com/questions/55965662/if-you-specify-bottom-0-for-position-sticky-why-is-it-doing-something-diffe – m4n0 May 19 '22 at 18:05
  • The accepted answer here gives a pretty good breakdown of why this happens [CSS: Position sticky to bottom when enter viewport](https://stackoverflow.com/questions/54471322/css-position-sticky-to-bottom-when-enter-viewport) – AStombaugh May 19 '22 at 18:06
  • Yes I have noticed with content inside, it works as expected. Thanks – Huangism May 19 '22 at 18:11

0 Answers0