position sticky not working used inside container

Question

html {
  height: 100%;
}

body {
  height: 100%;
  background-color: var(--main-bg2-color);
}

.wrapper {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 55.6px !important;
  display: grid;
  grid-template-columns: 17% 50% 30%;
  column-gap: 15px;
}

.left-side {
  background-color: var(--main-bg2-color);
  color: var(--main-text-color);
  height: 100%;
  padding-top: 41px;
  padding-left: 0;
  position: sticky;
  top: 55px;
}

.middle-side {
  padding-top: 40px;
  background-color: var(--main-bg2-color);
  color: white;
  height: auto;
}

.right-side {
  padding-top: 40px;
  padding-left: 0;
  background-color: var(--main-bg2-color);
  height: auto;
  position: sticky;
  top: 55px;
}

<nav>
</nav>

<div class="container">
      <div class="wrapper">
        <div class="left-side">
        </div>
        <div class="middle-side">
        </div> 
        <div class="right-side">
        </div>
      </div>
    </div>
</div>

<footer>
</footer>

I want the left side class div and right side class div to be sticky and middle content should be scrollable while scrolling down so I have used position sticky to left side class and right side class. But the position sticky is not working.

I created a snippet from your code, please add code so we can actually see your problem. — cloned, Apr 20 '20 at 13:12
also it won't work with left because you made the height:100% — Temani Afif, Apr 20 '20 at 13:18
your element is stretched to its parent height so there is no room to have a sticky behavior. See the duplicate to understand how sticky works and how the height of the element is important — Temani Afif, Apr 20 '20 at 13:27

score -3 · Answer 1 · answered Apr 20 '20 at 13:11

-3

add this

  // chrome
  position: -webkit-sticky;

  // firefox
  position: -moz-sticky;

  // IE
  position: -ms-sticky;

answered Apr 20 '20 at 13:11

madi.wd

148
1
3

2

No prefixes necessary for this, all browsers support this without prefixes. Except IE, it doesn't support it at all, making this just wrong. – cloned Apr 20 '20 at 13:13
I had added it. But still it doesnt work – ronak patel Apr 20 '20 at 13:14

position sticky not working used inside container

1 Answers1