CSS 网格，2 列仪表板布局，2 个滚动条 100% 高度问题

Question

Hi I'm attempting to create a dashboard UI using CSS grid. Is CSS Grid the right choice for what I'm trying to do? Please let me know.

I'm currently stuck on the best way to implement a sidebar that is 100% height but anything over that create a overflow scrollbar. To make the case slightly more difficult, the default sidebar width is min-width: 100px but then when you click on the toggle button it expands and the width increases etc. I'm trying to avoid using magic numbers to make this solution possible.

The end goal is basically a responsive 2 column layout. 2 scrollbars, sidebar column 100% height and a main column that includes a header navbar.

What i'm trying to build

What i have so far: https://codepen.io/jackwebsitefeatures/pen/QWONzYy

 function toggleClass() { console.log("test"); document.querySelector('.app-sidenav').classList.toggle("expanded"); }

 *, *:before, *:after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: sans-serif; } /* mobile first */.app-layout { display: grid; height: 100vh; grid-template-rows: auto 1fr; }.app-header { display: flex; justify-content: space-between; align-items: center; height: 82px; }.app-sidenav { display: none; }.app-sidenav nav a span { display: none; }.filler-element { height: 2000px; } /* Desktop */ @media (min-width: 1020px) {.app-layout { display: grid; height: 100vh; grid-template-columns: auto 1fr; }.app-sidenav { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; overflow-y: auto; min-width: 100px; background: grey; }.app-sidenav.expanded { width: 250px; }.app-sidenav.expanded nav ul li a { display: inline-flex; align-items: center; }.app-sidenav.expanded nav ul li a span { display: inline-block; font-size: 1rem; font-weight: 600; }.app-sidenav.expanded nav ul li ai { margin-left: 0; margin-right: 1.2rem; }.app-sidenav nav { display: flex; flex-direction: column; }.app-sidenav nav ul li a { color: blue; text-decoration: none; padding: 1rem; display: inline-flex; align-items: center; }.app-sidenav nav ul li a:hover { color: #fff; text-decoration: none; }.app-sidenav nav ul li ai { display: block; margin: auto; }.app-sidenav button { margin: auto auto 1rem auto; }.app-header { grid-column: 2; grid-row: 1 / 2; padding: 0px 6rem; }.app-main { grid-column: 2; grid-row: 2 / 3; padding: 0px 6rem; } }

 <div class="app-layout"> <aside class="app-sidenav"> <div class="logo"> logo </div> <nav> <ul> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> <li><a href="#"><i>icon</i><span>Link</span></a></li> </ul> </nav> <button onclick="toggleClass()">expand toggle</button> </aside> <header class="app-header">im a sticky header - make sure on desktop device to see sidebar</header> <main class="app-main"> all main site goes in here... a 2000px filler height element is here btw <div class="filler-element"></div> </main> </div>

Any help would be much appreciated.

Answer 1

I've created a jsfiddle with an example here: https://jsfiddle.net/79ujhxdz/1/

I tried to keep the changes to your original code to a minimum. 1st for the sidenav you would need to make the position fixed, set the height to 100vh and simply move it in and out of view:

.app-sidenav {
  position: fixed;
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 100px;
  background: grey;
  width: 250px;
  height: 100vh;
  transform: translate(-250px);
}

.app-sidenav.expanded {
   transform: translate(0);
}

For the.app-main when the sidenav is expanded you need to also move it to the right and subtract the width of the sidenav from it's overall width to avoid adding horizontal scrolling:

.app-main.sidenav-expanded {
  transform: translate(250px);
  width: calc(100% - 250px);
}

In the html structure I moved the header in the main content so that the.app-layout layer only has the.app-sidenav and.app-main as children.

I've also updated the js part to toggle a class to both the.app-sidenav and.app-main but you could also just toggle a class to the parent.app-layout and update these two through inheritance in your css.

function toggleClass() {
  document.querySelector('.app-sidenav').classList.toggle("expanded");
  document.querySelector('.app-main').classList.toggle("sidenav-expanded");
}

Finally I removed the @media part of the css where you handle the desktop responsiveness to keep the jsfiddle css clearer and easier to understand.