Html 如何设置多个嵌套div的相对位置？

假设我有一些div，比如：

<div id="div0">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>

div0、div1和div3具有固定的高度。现在我想让div2自动展开，这样它就可以占用所有剩余的空间。有没有办法做到这一点？

---

看这个例子，我希望蓝色的盒子位于中间，占据所有剩余的空间。

你可以用<代码> Flex ：

#固定面板{
位置：固定；
宽度：350px；
高度：150像素；
边框样式：实心；
边框宽度：5px；
显示器：flex；
弯曲方向：立柱；
}
#第一组{
高度：20px；
边框样式：实心；
边框宽度：1px；
边框颜色：红色；
}
#第二组{
弹性：1；
边框样式：实心；
边框宽度：1px；
边框颜色：蓝色；
}
#第三组{
高度：20px；
边框样式：实心；
边框宽度：1px；
边框颜色：绿色；
}

1.
2.
3.

是，对行使用

表格

和

表格单元格

对于列：

html, body {
    margin: 0;
    height: 100%;
}

#div0 {
    display: table;
    height: 100%;
}

#div0 > div {
    display: table-row;
}

#div1, #div3 {
    height: 100px;
    background: blue;
}

#div2 {
    background: red;
}
#div0 > div {
    display: table-cell;
}

#div1, #div3 {
    width: 100px;
    background: blue;
}

#div2 {
    background: red;
}