Kevin Powell - Community•2y ago

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

Chris Bolson•2y ago

You can make the side column sticky by using something like this:

position: sticky;
align-self: flex-start;
top: 0;

position: sticky;
align-self: flex-start;
top: 0;

Kevin Powell•2y ago

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?

b1mind•2y ago

#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...

b1mind•2y ago

https://codepen.io/b1mind/pen/KKBvVzv

Brent Morton

CodePen

uhhh fixed/sticky/absolute

...

b1mind•2y ago

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

b1mind•2y ago

#👋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

Kevin Powell•2y ago

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).

b1mind•2y ago

I might have been the one that misunderstood too though xD

TrickShottasUnited•2y ago

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?

TrickShottasUnited•2y ago

TrickShottasUnited•2y ago

this is what i have for my website, i want the side menu to be fully taking up the height

Kevin Powell•2y ago

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/VwEyMmB

TrickShottasUnited•2y ago

yea thats it thank you

Gaming

Programming

how do i recreate this using flexbox.