Html CSS网格不适合其父div'；s高度

我构建了一个CSS网格布局，其中包含一个标题、一个侧边栏和一些可滚动的内容

我试图在容器

div

中测试该布局，其中我正在设置

宽度

和

高度

布局对容器的

宽度

响应良好，但对

高度

响应不好，这是为什么？有没有解决方法

正文{
保证金：0；
}
.集装箱{
宽度：70%；
高度：300px；/*如何设置高度*/
}
.第页{
宽度：100%；
显示：网格；
网格模板行：55px计算（100vh-55px）；/*第二行的高度限制*/
网格模板列：200px自动；
网格模板区域：
“导航标题”
“导航内容”；
}
.导航{
网格区域：导航；
背景色：浅绿色；
}
.标题{
网格区域：标题；
背景颜色：灰色；
}
.内容{
网格区域：内容；
背景色：红色；
溢出-y:自动；/*父级上的溢出条件*/
}
文章{
高度：1000px；/*在子级上设置的高度；触发滚动*/
}

侧导航
标题
标题
大量内容，由模拟。文章高度：1000px

您必须为网格容器设置明确的高度，然后从

网格模板行中删除
calc
，并使第二行为
1fr

因此，您可以为
页面
设置
高度：100%
（因此它继承了
容器的高度
），并使用
网格模板行：55px 1fr
（第二行现在展开以适应剩余高度）。请参见下面的演示：


正文{
保证金：0；
}
.集装箱{
宽度：70%；
高度：300px；/*如何设置高度*/
}
.第页{
宽度：100%；
高度：100%；/*已添加*/
显示：网格；
网格模板行：55px 1fr；/*已更改*/
网格模板列：200px自动；
网格模板区域：
“导航标题”
“导航内容”；
}
.导航{
网格区域：导航；
背景色：浅绿色；
}
.标题{
网格区域：标题；
背景颜色：灰色；
}
.内容{
网格区域：内容；
背景色：红色；
溢出-y:自动；/*父级上的溢出条件*/
}
文章{
高度：1000px；/*在子级上设置的高度；触发滚动*/
}

侧导航
标题
标题
大量内容，由模拟。文章高度：1000px

fr
单元确实是一个更好的选择，谢谢！使用
fr
而不是
auto
是否总是一个更好的选择？我想知道我是否也应该写：
网格模板列：200px 1fr