Html 如何使用calc正确设置动态高度？

我基本上希望第一个街区能占据任何自然高度。然后我希望第二个块以其自然高度填充页面的其余部分，而不让它创建垂直滚动条

我基本上是通过模板行硬编码100px。我怎样才能使事情变得更灵活？我尝试了各种值，如行中的

100%

而不是

100px

，以及

auto

.container{
显示：网格；
网格模板行：100px 1fr；
}
.休息{
最大高度：计算（100vh-100px）；
}

欢迎
一些可以更改长度/高度的文本
我希望这个街区是剩余的100%高度

fr

在此处不起作用，因为

容器的高度是自动的，因为您没有为其设置固定高度。因此，您可以将
容器的高度设置为100vh（注意，我已将
主体的
边距设置为零，以覆盖默认的浏览器边距）

还可以使用
网格模板行：auto 1fr
使第一行采用自动高度，第二行采用剩余高度。请参见下面的演示：


正文{
保证金：0；
}
.集装箱{
显示：网格；
网格模板行：自动1fr；
高度：100vh；
}
.container>div{
边框：1px实心；
}

欢迎
一些可以更改长度/高度的文本
我希望这个街区是剩余的100%高度
fr
在此处不起作用，因为
容器的高度是自动的，因为您没有为其设置固定高度。因此，您可以将
容器的高度设置为100vh（注意，我已将
主体的
边距设置为零，以覆盖默认的浏览器边距）

还可以使用
网格模板行：auto 1fr
使第一行采用自动高度，第二行采用剩余高度。请参见下面的演示：


正文{
保证金：0；
}
.集装箱{
显示：网格；
网格模板行：自动1fr；
高度：100vh；
}
.container>div{
边框：1px实心；
}

欢迎
一些可以更改长度/高度的文本
我希望这个街区是剩余的100%高度
我可以用flex box完成这项工作

签出此代码段：


*{
框大小：边框框；
保证金：0；
填充：0；
}
.家长{
背景颜色：钢蓝色；
宽度：500px；
高度：500px；
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
.child-1{
背景颜色：橙色；
宽度：100%；
}
.child-2{
背景颜色：黄绿色；
宽度：100%；
身高：100%；
}

dsadsa

dsadsa

dsadsa

dsadsa

dsadsa

我可以用flex box完成这项工作

签出此代码段：


*{
框大小：边框框；
保证金：0；
填充：0；
}
.家长{
背景颜色：钢蓝色；
宽度：500px；
高度：500px；
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
.child-1{
背景颜色：橙色；
宽度：100%；
}
.child-2{
背景颜色：黄绿色；
宽度：100%；
身高：100%；
}

dsadsa

dsadsa

dsadsa

dsadsa

dsadsa

请在问题中提供一个工作片段。还有，不清楚你在问什么。@DogukanCavus我以前从未使用过这个功能！在我看到这个之前，库库兹很友好地编辑了这个问题。请在你们的问题中提供一个工作片段。还有，不清楚你在问什么。@DogukanCavus我以前从未使用过这个功能！在我看到这个之前，库库兹很友好地编辑了这个问题。这似乎不起作用。当我转到全屏并缩小浏览器窗口时，会出现一个滚动条。@DaveStein我编辑了代码，并在父div中添加了一个
height:100vh
，外加一个全局重置。现在应该没事了，这似乎不起作用。当我转到全屏并缩小浏览器窗口时，会出现一个滚动条。@DaveStein我编辑了代码，并在父div中添加了一个
height:100vh
，外加一个全局重置。现在将此标记为答案应该没问题，但从技术上讲，我还需要一件事
.rest{max height:100%
将此标记为答案，但技术上我还需要一件事。
.rest{max height:100%