Force sidebar height 100% using CSS (with a sticky bottom image)?
This worked for me .container { overflow: hidden; …. } #sidebar { margin-bottom: -5000px; /* any large number will do */ padding-bottom: 5000px; …. }
This worked for me .container { overflow: hidden; …. } #sidebar { margin-bottom: -5000px; /* any large number will do */ padding-bottom: 5000px; …. }
+1 to the very nice and ilustrative image. I know it’s an old question, but I casually found the same question posted by you in forum.jquery.com and one answer there (by@tucker973), suggested one nice library to make this and wanted to share it here. It’s called sticky-kit by @leafo github project webpage simple example in … Read more
Here I will explain how to do it without an external library. It will be a very long post, so brace yourself. First of all, let me acknowledge @tim.paetz whose post inspired me to set off to a journey of implementing my own sticky headers using ItemDecorations. I borrowed some parts of his code in … Read more
Since flex box elements default to stretch, all the elements are the same height, which can’t be scrolled against. Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it. Currently this is supported in all major browsers, but Safari is still behind a -webkit- prefix, and other … Read more
Check if an ancestor element has overflow set (e.g. overflow:hidden); try toggling it. You may have to inspect the DOM tree higher than you expect =). This may affect your position:sticky on a descendant element.