how do i recreate this using flexbox.
https://youtu.be/Qez8SoJ_aso
also how do u make a flex direction row items take up the entire height of their parent element without setting a hard coded height value
FrontendDUDE
YouTube
How to Make a Div AND Sidebar Sticky On Scrolling | Sticky Sidebar
Learn to make a div sticky on scroll and also to create a sticky sidebar using only HTML & CSS. To achieve this I used position sticky property to stick sidebar.
With this tutorial you can make even your navigation bar sticky. To achieve this you don't need to use javascript you can make any div sticky with scrolling using only html and css.
TI...
14 Replies
You can make the side column sticky by using something like this:
What Chris said 🙂
For the second one part of your question about the height, they do take up the entire height of the parent already?
#learnGrid If you are still avoiding grid when I showed you a bang up solution idk what to say. Stop being afraid to use grid.
Also I had issues with making sticky 100% height, something I wanted to revisit but I think its a whole thing...
So this was what I had come up with in a rush. Based on the same as the other example I shared with you in your og post.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
#đź‘‹welcome Please make your own post with the question not in someone else's if you need more help on how to post in forums ask in #general and read #đź“ťrules
Oh, i might have misunderstood that bit... sticky can't be 100% height, since it stays within it's parent (like, a normal sticky thing will stick until it reaches the end of it's parent, then moves off with it).
I might have been the one that misunderstood too though xD
like is there a way to make a flex box item take up the height of its parent . i cant change the height by making it a hardcoded pixel but i want to be able to scroll by the end so i want it to always maintain 100% of the height . is this possible without using flex-direction column?
this is what i have for my website, i want the side menu to be fully taking up the height
So, you don't want it to be the entire height of the parent, you want it to be the height of the viewport.
If it's the height of the parent, it can't stick. Just the nature of the game there.
In this case, probably a decent usecase for
height: 100vh though.
Here's a quick example:
https://codepen.io/kevinpowell/pen/VwEyMmByea thats it thank you