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

Question

您好，我正在尝试使用 CSS 网格创建仪表板 UI。 CSS Grid 是我想要做的事情的正确选择吗？ 请告诉我。

我目前坚持使用最佳方法来实现 100% 高度的侧边栏，但超过该高度的任何内容都会创建溢出滚动条。 为了使情况稍微困难一些，默认的侧边栏宽度是 min-width: 100px 但是当你点击切换按钮时它会展开并且宽度会增加等。我试图避免使用幻数来使这个解决方案成为可能。

最终目标基本上是响应式 2 列布局。 2 个滚动条，侧边栏列 100% 高度和一个包含 header 导航栏的主列。

我正在尝试构建什么

到目前为止我所拥有的： 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>

任何帮助将非常感激。

Answer 1

我在这里创建了一个带有示例的 jsfiddle： https://jsfiddle.net/79ujhxdz/1/

我试图将对原始代码的更改保持在最低限度。 首先，对于 sidenav，您需要固定 position，将高度设置为 100vh，然后简单地将其移入和移出视图：

.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);
}

对于 the.app-main，当 sidenav 展开时，您还需要将其向右移动并从其总宽度中减去 sidenav 的宽度以避免添加水平滚动：

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

在 html 结构中，我在主要内容中移动了 header，这样 .app-layout 层只有 .app-sidenav 和 .app-main 作为子层。

我还更新了 js 部分以将 class 切换到 the.app-sidenav 和 .app-main，但您也可以将 class 切换到 parent.app-layout 并通过 css 中的 inheritance 更新这两个。

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

最后，我删除了 css 的 @media 部分，您可以在其中处理桌面响应，以使 jsfiddle css 更清晰、更易于理解。