CSS Grid/Flexbox布局中aside和main不使用vh占满剩余高度的实现方案

你当前的grid行高规则grid-template-rows: auto 1fr auto本身逻辑是正确的，1fr本就会自动占用剩余空间，失效的核心原因是body的百分比高度没有生效：百分比高度需要基于父元素的明确高度计算，而你没有给body的父元素html设置高度，导致整个grid容器的高度只能由内容撑开，无法占满视口。

仅需要做3处小调整即可实现需求：

• 新增html元素的高度规则，为百分比高度提供计算基准
• 将body的height属性调整为min-height，避免内容超出视口时被截断
• 补全grid-template-areas末尾缺失的分号，避免部分浏览器解析异常

修改后的完整CSS代码如下：

html {
  height: 100%;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: 30% auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header"
                       "sidebar main"
                       "footer footer";
}

header,
aside,
main,
footer {
  padding: 16px;
  text-align: center;
}

header {
  background: purple;
  grid-area: header;
}

aside {
  background: blue;
  grid-area: sidebar;
}

main {
  background: green;
  grid-area: main;
}

footer {
  background: orange;
  grid-area: footer;
}

修改后页面默认占满完整视口高度，aside和main所在行自动填充header、footer之外的所有剩余空间，内容超出视口时页面会自动撑开，全程未使用vh单位，符合需求。

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