如何使 Grid 的元素占用所有剩余空间？答案

【问题标题】：How to make an element of a Grid take all remaining space?如何使 Grid 的元素占用所有剩余空间？
【发布时间】：2021-05-17 20:30:13
【问题描述】：

我正在构建一个基于 3 行的网格布局，我希望中间行尽可能多地占用空间。

第一行应该在屏幕的开头（代码示例中的蓝条），第三行应该在屏幕的末尾（代码示例中的红条）

我怎样才能做到这一点？ :S

https://jsfiddle.net/xmghkLvs/31/

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  row-gap: 1%;
}

.top-bar{
  background-color: blue;
  border-radius: 5px;
}

.main-menu{
  justify-self: center;
  display: flex;
  flex-direction: column;
  background-color: green;
}

.bottom-bar{
    background-color: red;
    border-radius: 5px;
}

<div class="grid">
  <div class="top-bar">
    <h1>
     Title
    </h1>
  </div>
  <div class="main-menu">
    <button>
      One Button
    </button>
    <button>
     Other Button
    </button>
  </div>
  <div class="bottom-bar">
   <p>
     I'm a text
   </p>
  </div>
</div>

【问题讨论】：

标签： html css flexbox css-grid web-frontend

【解决方案1】：

第一个：给网格一个最小高度，比如 100vh (.grid { min-height: 100vh; })。这将至少消耗视口高度。

2nd：将第一行和最后一行的高度设为min-content。这将使它只消耗所需的高度。然后auto 默认会占用所有剩余空间。

.grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto min-content;
  row-gap: 1%;
}

.top-bar{
  background-color: blue;
  border-radius: 5px;
}

.main-menu{
  justify-self: center;
  display: flex;
  flex-direction: column;
  background-color: green;
}

.bottom-bar{
    background-color: red;
    border-radius: 5px;
}

<div class="grid">
  <div class="top-bar">
    <h1>
     Title
    </h1>
  </div>
  <div class="main-menu">
    <button>
      One Button
    </button>
    <button>
     Other Button
    </button>
  </div>
  <div class="bottom-bar">
   <p>
     I'm a text
   </p>
  </div>
</div>

【讨论】：

【解决方案2】：

尝试使用 100vh

.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 1%;
    height: 100vh;
}

并为 .top-bar abd .bottom-bar 添加特定高度

【讨论】：

您应该使用min-height 而不是height 以防止出现溢出问题。

【解决方案3】：

您可以使用 Flexbox 和 100vh 来解决此问题，如下所示。

.grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.top-bar{
  display: flex;
  height: 20%;
}

.main-menu{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60%;
}

.main-menu button {
  height: 60px;
  width: 120px;
}

.bottom-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20%;
}

【讨论】：