KPC
Kevin Powell - Community•9mo ago
uD

Need Help Achieving Individual Scrollbars for Two Divs in a Layout

I have a layout with two sidebars, a left one and a right one. I want each bar to have its own scrollable area without hiding any content. The right bar is positioned absolutely to cover the entire height of its container. However, I'm facing some issues with the layout. What adjustments can I make to achieve this properly with the same html layout? Codepen: https://codepen.io/umanga/pen/MWRBwyV
Umanga Deep Shrestha
CodePen
MWRBwyV
...
3 Replies
MarkBoots
MarkBoots•9mo ago
so the pink and the green are supposed to scroll?
uD
uDOP•9mo ago
Yes Both the Pink and Green have to scroll individually. I have updated the pen and the scroll works fine. But will the position absolute hurt anything here with the layout? @Kevin Would appreciate your input here or maybe there would be any other way to do it without using absolute in the same div layouts.
MarkBoots
MarkBoots•9mo ago
create a grid full height with 2 columns. let the green part span over 2 rows. then give the pink and green a overflow: auto 
<div class="layout-container">
  <header>Hello</header>
  <main>green</main>
  <aside>pink</aside>
</div>
<div class="layout-container">
  <header>Hello</header>
  <main>green</main>
  <aside>pink</aside>
</div>
html, body { height: 100%; }
body { margin: 0; }
.layout-container {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
}
.layout-container > main {
  grid-row-end: span 2;
}
.layout-container > main,
.layout-container > aside {
  overflow: auto;
}
html, body { height: 100%; }
body { margin: 0; }
.layout-container {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
}
.layout-container > main {
  grid-row-end: span 2;
}
.layout-container > main,
.layout-container > aside {
  overflow: auto;
}

Did you find this page helpful?