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

Question

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

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

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

What i'm trying to build

到目前为止我所拥有的： 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 a i {
    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 a i {
    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，您需要固定位置，将高度设置为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);
}

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

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

在 html 结构中，我移动了主要内容中的标题，以便 .app-layout 层只有 .app-sidenav 和 .app-main 作为子级。

我还更新了 js 部分以将一个类切换到 .app-sidenav 和 .app-main 但您也可以将一个类切换到父级 .app-layout 并通过继承更新这两个

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

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