Javascript 使div适合剩余高度

我有以下几项

<div class="top">
   <div class="inner1"></div>
   <div class="inner2"></div>
   <div class="inner3"></div>
</div>

我不想使用calc（100vh-30vh-265px）来设置div2的最小高度。我怎样才能拥有它，使它占据剩余的高度（意味着div2高度=100vh-div1高度-div2高度）

我猜flex在这里可能有用，但我不太确定如何使用它。任何帮助都将不胜感激

谢谢

---

在将其标记为重复之前，请注意：我尝试使用flex，但在IE11中效果不佳。

不知道这是否是最好的主意，但为了克服跨浏览器限制，我通常使用javascript重新计算。我编写javascript函数，然后在调整窗口大小和加载时启动它

//一些jQuery
功能调整高度（）{
var fullHeight=$（window.height（）；
var neededHeight=全高-全高*0.3-263；
$（'.div2'）.css（'min-height'，needheight+'px'）；
}
$（document）.ready（function（）{adjustHeight（）；}）；

在flex旁边，display:table属性对于较旧的浏览器也有帮助

在这种情况下，高度变为最小高度

.top{
高度：100vh；
显示：表格；
宽度：100%；
}
.top>div{
显示：表格行；
}
.1{
最小高度：215px；/*无效*/
框大小：边框框；
高度：30vh；
背景：番茄；
}
.2{
框大小：边框框；
填充顶部：2.5em；/*我在这里会被挤压*/
页边距顶部：0；/*无用，将使用边框间距*/
背景：绿松石；
}
.3{
高度：265px；
框大小：边框框；
背景：黄色；
显示：表格；
宽度：100%；
字号：700；
填充底部：42px；/*？：）*/
}

1.
整页运行我，查看我的行为：）
3.

它在IE11中应该可以正常工作。你能举个例子吗？唯一的问题是IE10，你必须使用-ms-prefix。如果你愿意使用FlexBox，它看起来就像是IE11中的一个副本。请-如果你的问题以dup形式结束，通过复制+粘贴的方式再次询问它不是一个好办法。

.top { 
    height: 100vh;
}

.div1 {
    min-height: 215px;
    box-sizing: border-box;
    height: 30vh;
}

.div2 { 
    box-sizing: border-box;
    min-height: calc(100vh - 30vh - 265px);
    padding-top: 2.5em;
    margin-top: 0;
    display: table;
}

.div3 {
    min-height: 265px;
    box-sizing: border-box;
    background: white;
    display: table;
    width: 100%;
    font-weight: 700;
    padding-bottom: 42px;
}