Html 如何将图元的高度延伸到其父图元的底部

我想将一个元素的高度延伸到其父元素高度的底部。我找不到任何方法或解决办法来做这件事。这是我的密码

因此，在子元素上面有一些内容，我希望子元素占据它下面的所有空间。基本上：父元素的其余部分（到其高度的底部）

我还尝试过对子元素的高度进行糟糕的视觉显示，应该扩展（红色区域应该是它的新高度）

目前，它只有我在CSS中添加的

填充

及其元素的高度。

.parent{
背景:#2323；
高度：500px；
}
h1{
颜色：白色
}
.孩子{
填充：50px；
边框：3倍纯红；
}

*其他一些内容*
*子元素的内容*

使用CSS网格，您可以轻松做到这一点

.parent{
背景:#2323；
高度：500px；
显示：网格；
网格模板行：自动1fr；
}
h1{
颜色：白色
}
.孩子{
填充：50px；
边框：3倍纯红；
}

*其他一些内容*
*子元素的内容*

工作正常。谢谢还有，如果你够慷慨的话，你能告诉我你是怎么做的吗？@LeqsoBezarashvili用CSS网格创建了一个网格，它有两行：第一行的高度是自动的，所以随着第一个子元素的高度增加，这一行的高度会增加，而随着1fr，我把父元素的其余高度给了第二个子元素，你可以从中了解更多关于CSS网格的信息本教程：