Html 可滚动div以填充父级的剩余高度

我需要以某种方式创建一个

div

，以某种方式是可滚动的，并填充其父对象的剩余空间（父对象具有固定高度，其他所有内容都是动态的）

问题是高度是动态的（除了主父级），它应该与IE兼容（至少7或8），我不能使用Javascript
有人知道这是如何实现的吗

这是一把代表我布局的小提琴：

*我需要橙色div填充剩余高度并可滚动

.parent{
显示：表格；
高度：计算（100vh-50px）；
背景色：白色；
边框：1px实心#eee；
}
.孩子{
显示：表格单元格；
身高：100%；
}
.子女：第n名子女（1）{
背景颜色：蓝色；
颜色：#fff；
}
.子女：第n名子女（2）{
背景颜色：黄色；
}
.子父母{
显示：块；
背景颜色：粉红色；
身高：100%；
}
.次子{
宽度：100%；
浮动：左
}
.子子女：第n个子女（1）{
背景色：红色；
颜色：#fff；
}
.子子女：第n个子女（2）{
背景颜色：橙色；
溢出y：滚动；
}

正常儿童
这个有一个动态高度
这个应该填满剩余的高度，并且可以滚动
如果没有javascript，这是不可能的。您可以通过将子父级设置为固定高度（而不是100%）并为橙色div指定一个最小高度，该最小高度至少与在所有情况下填充剩余空间所需的高度一样大，从而使整个右侧部分都可以滚动

但是如果没有Javascript，就无法告诉orange div只填充剩余的空间。
首先，我发布了一篇文章，建议这是不可能的。然后我想起了过去所有的网站都是用表格进行布局的。我想你得用那些老办法来解决这个问题。如果您的子父级是单列表，您的第一个子级是thead，第二个子级是tbody，那么您可以使用与此答案相同的技巧：
试试这个。它使用显示：表格和表格行。内容的位置为：绝对，左、上、右和下设置为0



.parent{
显示：表格；
高度：计算（100vh-200px）；
背景色：白色；
边框：1px实心#eee；
}
.孩子{
显示：表格单元格；
身高：100%；
}
.子女：第n名子女（1）{
背景颜色：蓝色；
颜色：#fff；
}
.子女：第n名子女（2）{
背景颜色：黄色；
}
.子父母{
显示：块；
背景颜色：粉红色；
身高：100%；
显示：表格；
}
.次子{
宽度：100%；
显示：表格行；
}
.子子女：第n个子女（1）{
背景色：红色；
颜色：#fff；
}
.子子女：第n个子女（2）{
背景颜色：橙色；
身高：100%；
}
.内容包装器{
宽度：100%；
身高：100%；
位置：相对位置；
}
.内容{
溢出y：自动；
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
}

正常儿童
这个有一个动态高度


这个有一个动态高度
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
这个应该填满剩余的高度，并且可以滚动
@j08691抱歉，添加了代码。您可以使用display:flex来完成此操作，但它在中不起作用IE8@koga73是的，我知道，这就是为什么我至少指定了IE 7或8，而没有JS:|仅供参考，
calc（）
函数与IE8或更早版本不兼容。这仍然需要固定的车身高度，或者我理解错了吗？耶，事实上你是对的。我认为我的第一个回答是，如果没有javascript，这是不可能的，这可能确实是正确的。可能会有一个非常棘手的解决方案，您可以将其设置为固定高度，覆盖或超过顶部元素所有可能高度的可用区域的高度，然后将溢出设置为隐藏在父元素上，但这样您就有了可能永远看不见的内容。