Html 如何填充嵌套div中的剩余高度？

我有三个盒子，高度分别为20%、50%、30%（=100%）。三个框中的每一个都分为两个div，分别有“title”和“remaining”类

HTML:

下面是一个例子：

我的问题是让名为“remaining”的类占用父div的确切的剩余高度。在我的示例中，我将其设置为65%，这显然是不正确的。我还尝试：

.remaining {
    background:green;
    height: (100% - 30px);
}

但这也不起作用

这是一本书

有什么办法可以用css解决这个问题吗？

使用

calc（）

来计算你的身高

.remaining {
  background:green;
  height: calc(100% - 30px);
}

这是一张工作票

.wrapper{
高度：600px；
宽度：300px；
背景：白色；
}
.一{
身高：20%；
背景：蓝色；
}
.二{
身高：50%；
背景：黄色；
}
.三{
身高：30%；
背景：红色；
}
.头衔{
高度：30px；
背景：黑色；
}
.剩余{
背景：绿色；
高度：计算（100%-30px）；
}

标题一
剩下的一个
标题二
剩下的两个
标题三
剩下的三个

注意：

.remaining {
    height: calc(100% - 30px);
}

• 您可以使用如下代码所示的

  calc（）

  函数来完成此操作

• 另外，从小提琴中的CSS中删除

  /*

  ，因为它会使收尾大括号无效

代码：

.remaining {
    height: calc(100% - 30px);
}

• 由于

  .title

  的高度是

  30px

  ，您需要

  。剩余的
  填充父级高度减去标题高度的100%

jsFiddle:→ .

片段：

.remaining {
    height: calc(100% - 30px);
}

.wrapper{
高度：600px；
宽度：300px；
背景：白色；
}
.一{
身高：20%；
背景：蓝色；
}
.二{
身高：50%；
背景：黄色；
}
.三{
身高：30%；
背景：红色；
}
.头衔{
高度：30px；
背景：黑色；
}
.剩余{
背景：绿色；
高度：计算（100%-30px）；
}

标题一
剩下的一个
标题二
剩下的两个
标题三
剩下的三个

您可以始终使用flexbox。

.wrapper

的每个子级都应该是一个flex容器。将轴设置为列，然后告诉

。剩余的
为“增长”：

这是一张工作票


.wrapper{
高度：600px；
宽度：300px；
背景：白色；
颜色：白色；
}
.wrapper>div{
显示器：flex；
弯曲方向：立柱；
}
.一{
身高：20%；
背景：蓝色；
}
.二{
身高：50%；
背景：黄色；
}
.三{
身高：30%；
背景：红色；
}
.头衔{
高度：30px；
背景：黑色；
}
.剩余{
背景：绿色；
弹性：1；
}

标题一
剩下的一个
标题二
剩下的两个
标题三
剩下的三个
使用
calc（100%-30px）
。尝试了一下，但没有效果。我添加了一把小提琴来检查它。你看，我很高兴能帮你@brinch@brinch也请回复您的问题。我认为，因此，你应该把你的问题留在原地不作答。我之前被主持人警告过。我也很高兴能帮忙。是的，我明白你的意思。我已手动将问题回复到原来的位置。
.wrapper > div {
  display: flex;
  flex-direction: column;
}
.remaining {
  background: green;
  flex: 1;
}