Html 网格模板自动调整行大小无效

我需要自动调整行的大小，但它没有调整大小。如何使行自动调整高度

我的代码：

正文{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
宽度：100vw；
保证金：0；
填充：0；
盒影：嵌入2px 2px红色，嵌入-2px-2px红色
}
.身体{
显示：网格；
网格模板行：1fr 40px；
网格模板列：100%；
}
.身体科{
盒影：嵌入2px 2px红色，嵌入-2px-2px红色
}
.第页{
显示：网格；
网格模板行：40px自动40px；
/*如果我用“计算（100vh-120px）”代替“自动”则有效*/
网格模板列：100%；
}

页面标题
头
内容
脚
导航

您几乎很好，只需将

flex grow:1

添加到

.body

中，即可填充您在

body

中设置的flex容器的空间。您的代码工作正常，但问题出在上层容器上

正文{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
保证金：0；
填充：0；
盒影：嵌入2px 2px红色，嵌入-2px-2px红色
}
.身体{
显示：网格；
网格模板行：1fr 40px；
flex grow:1；/*已添加*/
}
.身体科{
盒影：嵌入2px 2px红色，嵌入-2px-2px红色
}
.第页{
显示：网格；
网格模板行：40px自动40px；
}

头
内容
脚
导航