Hello there ๐๐ผ, internet users. Today, I'll show you a CSS trick I frequently forget about when creating scrollable dynamic height layouts. Recently, I was developing a basic layout similar to one below. It took me a while to remember this trick, but once I did, I had a sense of deja vu and finished the layout.
There are two way to achieve this:
Way 1: Using css positions:
If you look at the code above, you'll see what I mean. As you can see, there's a NAVBAR, a BREADCRUMB BAR, the MAIN SECTION, and a FOOTER all contained within a layout container with the height of height: 100vh
. I wanted the sidebar and content-box in my main section to be scrollable.
I could set the height as a fixed value, something like height: 800px
with overflow-y: scroll
but then making the layout responsive will become a nightmare.
So, the question arises? ๐ค. How can we apply the overflow-y: scroll
attribute to a div with a height of 100 percent?
The solution ๐งช here is to use position: relative
for the main section container and position: absolute
for the sidebar and content bar, with overflow-y: scroll
.
.main {
position: relative;
height: 100%;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
bottom: 0; /*stretch from top to bottom w.r.t .main section*/
width: 10rem;
overflow-y: scroll;
}
.content {
position: absolute;
top: 0;
left: 10rem;
bottom: 0;
right: 0; /* stretch from top to bottom, and shift 10rem from left and stretch till right */
overflow-y: scroll;
}
There are many other ways, to achieve this. It's just a trick i often use. If you have any alternate way please comment (I'm all ๐). Congratulations ๐ for reading this. Hope this might help you. Thank you.
After many of you suggested there's a neat way to do this avoiding css positions. I've added another solution using css grid.
Way 2: Using css grid