Css 做一个<；部门>；动态填充父项的剩余部分'；s高度

在空间已经分配给其他元素之后，是否可以让div填充父元素的剩余高度

具体来说，采用以下布局：

<div id="parent">
  <div id="sibling"></div>
  <div id="resizableDiv"></div>
</div>

父对象具有已知的固定高度。但是，同级可以切换，可以具有0高度（

display:none

），也可以具有正常高度。可调整大小的div是父级的最后一个子级

---

能否做到这一点：

• 动态地，这意味着它在显示或隐藏前一个同级时更新；或插入、移除；等
• 没有JavaScript
• 不知道其他兄弟姐妹的身高
• IE9（额外学分）

---

谢谢

可以使用CSS表格和表格行

$（“按钮”）。单击（函数（）{
$（“#resizeblediv”）.toggle（）；
});
#父级{
显示：表格；
宽度：100%；
高度：100px；
}
#兄弟姐妹，#调整大小IV{
显示：表格行；
背景：银；
}
#调整大小{
背景：灰色；
}

1.
2.

显示/隐藏
我尝试使用模型。我将flex属性添加到了
#父项及其子项

#parent {
    height: 400px;
    border: 2px solid #333;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}
#sibling {
    border: 2px solid red;
    flex: 0 0 100px;
}
#resizableDiv {
    border: 2px solid green;
    flex: 1 0;
}

请看工作小提琴


但没有IE9学分：(
好吧，当我可以升级IE时，这就是我必须期待的！：-）感谢flex链接。