Menu
I have a tricky layout that I could use some help with. Here's what it looks like:
There's a header and some other content, and i want these vertical bars on the right side on top everything else. Their wrapper element should be 100 % in height and ideally the bars would be defined with percentages too, so they would stretch and shrink based on the height of the content. The structure of the code is something like this:
<body>
<header></header>
<div class="content wrapper">
<div class="banner"></div>
<main></main>
<footer></footer>
</div>
<aside>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</aside>
</body>
I'm using flexbox to get a sticky footer.
body {
dispay: flex;
min-height: 100vh;
flex-direction: column;
}
content-wrapper {
flex: 1;
}
main {
flex: 1;
}
I'm new to flexbox so I'm not exactly sure what would the best way to use it. Here's what I've tried:
aside {
display: flex;
width: 40px;
flex-direction: column;
position: absolute;
top: 0;
right: 0;
height: 100vh;
}
bar {
flex: 1;
}
It works otherwise but I can't get the content to stretch all the way down, heigh 100% and height 100vh only make the aside element the same height as browser window. Having flex: 1 on the bar elements makes them all the same size, which is okay, but I would prefer to have them in different sizes defined by percentages.
Another thing I tried was removing flex-direction from body and using only this:
aside {
display: flex;
width: 40px;
flex-direction: column;
}
bar {
flex: 1;
}
That stretches the bars all the way down, but removing flex-direction from the body messes the layout on some pages that I have. It also adds the bars on the side of the layout, not on top of everything, so I can't for example see the banner from the gaps of the bars.
I tried having the aside-element inside the wrapper, before it and after it like it is now, but couldn't find a solution.
The layout and the code already has a lot of stuff in it and it's not all made by me, so there might be some things that I don't know about affecting these elements. But does anyone have suggestions on how to make it work by fixing one of these solutions or is there a completely different way that would work better?
339
asked Dec 07 '25 07:12
I made a jsfiddle with the layout you want. The thing that was missing is a position: relative on the body, then you can use position: absolute; top: 0; bottom: 0; right: 0; to get the bar to take up all the height.
To get different size for the right bars, you can use different values for the flex of each bar. Lets say you want the first bar to take 1/3 of the total height then you can set flex: 1; on the first and flex: 2; on the second.
https://jsfiddle.net/2q16xk57/1/
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
