如何在 CSS 网格中垂直使用所有可用的 space？

Question

我正在尝试构建一个网页布局，其中包含标题栏、导航 header、页脚和中间的主要内容区域（侧边栏和主视图分为两部分）。

我打算使用 CSS 网格布局。我当前的代码管理这一切，除了：主要内容（和侧边栏）调整到它的内容。这不是我想要的。

如何让第 3 个网格行填满所有剩余的垂直 space？

* {
  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;
}

<div class="grid">
  <div class="title">
    <h3>Title Bar</h1>
  </div>
  <div class="navigation">Navbar</div>
  <div class="sidebar">Sidebar:<br>Info-type stuff about what's currently being shown in main</div>
  <div class="footer">Footer</div>
  <div class="main">
    <h1>Main content</h2><br>Should occupy all the remaining space. <br>Test<br>Test<br>Test<br>Test<br>Test</div>
</div>

Answer 1

解决方案

将 网格高度 设置为 视口高度 - 将 height: 100vh 添加到 .grid 并重置默认值浏览器 body 保证金为零。

为什么

这是因为除非容器（您已为其指定display: grid）有一个集合height，否则需要只有与其内容一样多 space 。 因此，当您提供高度时，现在可以 space 填充 。请参阅下面的演示：

* {
  box-sizing: border-box;
}
body { /* ADDED */
  margin: 0;
}

.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";
  height: 100vh; /* ADDED */
}

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

<div class="grid">
  <div class="title">
    <h3>Title Bar</h1>
  </div>
  <div class="navigation">Navbar</div>
  <div class="sidebar">Sidebar:<br>Info-type stuff about what's currently being shown in main</div>
  <div class="footer">Footer</div>
  <div class="main">
    <h1>Main content</h2><br>Should occupy all the remaining space. <br>Test<br>Test<br>Test<br>Test<br>Test</div>
</div>

Answer 2

How can I make that 3rd grid row fill all remaining vertical space?

在您的布局中，没有剩余的垂直space。由于您的容器没有定义的高度，因此它的高度基于内容的高度。所以没有额外的space分发。

但是，假设您的容器有视口的高度...

.grid { height: 100vh }

...然后您可以获得侧边栏和主要内容（统称为第三行）以获取所有剩余高度：

.grid { grid-template-rows: min-content min-content 1fr min-content; }

而不是

.grid { grid-template-rows: min-content min-content auto min-content; }

* {
  box-sizing: border-box;
}

.grid {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: min-content min-content 1fr 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;
}

body {
  margin: 0;
}

<div class="grid">
  <div class="title">
    <h1>Title Bar</h1>
  </div>
  <div class="navigation">Navbar</div>
  <div class="sidebar">Sidebar:
    <br>Info-type stuff about what's currently being shown in main</div>
  <div class="footer">Footer</div>
  <div class="main">
    <h2>Main content</h2>
    <br>Should occupy all the remaining space.
</div>
</div>

如何在 CSS 网格中垂直使用所有可用的 space？

How to use all available space vertically in a CSS Grid?

html

css

css-grid