如何让CSS Grid面板占满视口剩余高度，工具栏自适应内容？

完全可以通过CSS Grid实现你的需求，核心是利用grid-template-rows中的auto和1fr关键字：

• auto：让行高度自动适配内容（对应common-toolbar和左右toolbar行）
• 1fr：占据容器的剩余可用空间（对应panel行）

修改后的#grid-wrapper CSS代码如下：

#grid-wrapper {
  display: grid;
  grid-template-columns: calc(50% - 5px) 50%; /* 修复原代码的空格语法问题 */
  grid-template-rows: 50px auto auto 1fr 50px; /* 关键修改：用auto和1fr替代固定高度与calc */
  grid-template-areas:    
    "header header"
    "common-toolbar common-toolbar"
    "left-toolbar right-toolbar"
    "left-panel right-panel"
    "footer footer";
  width: 100vw;
  height: 100vh;
  column-gap: 10px;
}

原理说明 #

1. grid-template-rows: 50px auto auto 1fr 50px：

   • 第一行（header）和最后一行（footer）保持固定50px高度
   • 第二、三行（common-toolbar和左右toolbar）用auto，会根据内部按钮、文本的实际高度自动调整行高
   • 第四行（panel）用1fr，Grid会自动计算容器总高度减去其他行的实际占用高度，把剩余空间全部分配给这一行

2. 滚动功能保持：
   保留left-panel和right-panel-content的overflow-y: scroll属性，当内容超出panel高度时会自动出现滚动条。

效果验证 #

当你给toolbar添加更多按钮或者调整内容时，对应行的高度会自动扩展，panel区域会自动收缩以占据视口剩余空间，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者Alice Oualouest