This content originally appeared on DEV Community and was authored by Harsh boricha
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 this. It took a while for me to remember this trick, but once I did, I had a sense of deja vu and finished the layout.
If you look at the code, 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.
This content originally appeared on DEV Community and was authored by Harsh boricha
Harsh boricha | Sciencx (2021-10-23T10:15:00+00:00) Scrollable div layout with height 100%. Retrieved from https://www.scien.cx/2021/10/23/scrollable-div-layout-with-height-100/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.