Html CSS网格中灵活的网格行高度

我对网格区域和溢出定义区域的内容有一些问题

在我下面的代码中，您可以看到蓝色的内容区域有足够的内容可以向下推绿色的页脚，但它没有

我假设这与

网格模板行

属性有关，但我不知道如何修复它。有可能吗

我喜欢网格固有的灵活性，但这一问题让我感到困惑，似乎让我对所有事情都感到沮丧，这意味着我不能拥有比几段更大的内容

我有以下资料：

*{
填充：0；
保证金：0；
}
p{
利润率：10px0；
}
a{
颜色：#191970；
文字装饰：无；
}
身体{
/*背景：线性梯度（白色，#e0f7ff）*/
显示：网格；
网格模板柱：1fr 3fr；
网格模板行：1fr 1fr 3fr 1fr；
网格模板区域：“徽标导航”“徽标内容”“旁侧内容”“页脚”；
栅隙：10px；
字体系列：“Copse”；
宽度：100vw；
高度：100vh；
}
/*@媒体屏幕和屏幕（最大宽度：480px）{
身体{
显示：网格；
网格模板列：1fr；
网格模板行：1fr 1fr 3fr 1fr；
网格模板区域：“徽标”
“导航”
“内容”
“页脚”；
栅隙：10px；
}
}*/
标题{
背景色：红色；
网格区域：标志；
}
收割台img{
最大高度：100%；
最大宽度：100%；
}
导航{
背景颜色：黄色；
网格区域：导航；
}
导航ul{
显示器：flex；
}
李国荣{
列表样式类型：无；
利润率：0.10px；
}
部分{
背景颜色：蓝色；
网格区域：内容；
}
旁白{
背景颜色：灰色；
网格区域：侧边；
}
页脚{
背景颜色：绿色；
网格区域：页脚；
}

系统











版权及副本；2017

您将集装箱的

高度限制为
100vh

如果希望容器扩展内容，请使用
minheight:100vh

这似乎只有在跨越多行时才会发生。如果您的内容仅在一行中，它将毫无问题地将其向下推。我也不知道如何解决这个问题。