小编tho*_*low的帖子

如何在 CSS 网格中垂直使用所有可用空间？

我正在尝试构建一个带有标题栏、导航页眉、页脚和中间的主要内容区域的 Web 布局（侧边栏和主视图一分为二）。

我打算使用 CSS Grid 布局。我当前的代码管理这一切，除了：主要内容（和侧边栏）根据其内容进行调整。这不是我想要的。

如何让第三个网格行填充所有剩余的垂直空间？

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: min-content min-content auto min-content;
  grid-gap: 10px;
  grid-template-areas: "header header" "nav nav" "sidebar main" "footer footer";
}

.title {
  grid-area: header;
  background-color: #1BC336;
}

.navigation {
  grid-area: nav;
  background-color: #C3A21B;
}

.sidebar {
  grid-area: sidebar;
  background-color: gold;
  overflow: auto;
}

.main {
  grid-area: main;
  background-color: #1BC3B9;
  overflow: auto;
}

.footer {
  grid-area: footer;
  background-color: #5C1BC3;
}

Run Code Online (Sandbox Code Playgroud)