如何让3行Grid布局中的中间行占满全部剩余可用空间？

解决方案 #

你需要调整Grid容器的高度规则和行高分配规则，具体修改点如下：

• 首先清除页面默认边距，让Grid容器可以撑满整个视口高度
• 将Grid的行高规则从auto auto auto改为auto 1fr auto，其中1fr会自动占用上下两行之外的所有剩余空间

修改后完整CSS代码 #

/* 新增：清除默认边距，撑满视口高度 */
html, body {
  margin: 0;
  height: 100%;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  /* 修改：中间行用1fr占满剩余空间 */
  grid-template-rows: auto 1fr auto;
  row-gap: 8px; /* 建议改为固定值避免百分比间隙在不同视口下的异常 */
  /* 新增：让Grid容器撑满整个视口高度 */
  height: 100%;
}

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

HTML代码不需要做任何修改，应用上述样式后即可实现需求：顶部蓝色栏固定在视口顶部、底部红色栏固定在视口底部，中间绿色区域自动占满剩余的所有可用空间。

内容的提问来源于stack exchange，提问作者Antonio Ramírez Soláns