Kevin Powell - Community•3mo ago

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•3mo ago

so the pink and the green are supposed to scroll?

uD•3mo 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•3mo 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;
}

Gaming

Programming

Need Help Achieving Individual Scrollbars for Two Divs in a Layout