Question

在将空间分配给其他元素之后，是否可以在父级高度的剩余部分填充div？

具体来说，具有以下布局：

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

父母有一个已知的固定高度。但是，兄弟姐妹可以切换，并且可以具有0高度（display: none）或其正常高度。可调整大小的div是父级的最后一个子级。

可以这样做：

动态地表示它在显示或隐藏前一个兄弟时更新;或插入，删除;等
没有JavaScript？
事先不知道其他兄弟姐妹的身高？
对于IE9（额外学分）

谢谢！

Answer 1

可以使用CSS表和表格行。

http://jsfiddle.net/xs06asy9/

＆＃13;

$("button").click(function () {
    $("#resizableDiv").toggle();
});

＆＃13;

#parent {
    display: table;
    width: 100%;
    height: 100px;
}
#sibling, #resizableDiv {
    display: table-row;
    background: silver;
}
#resizableDiv {
    background: gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="parent">
    <div id="sibling">1</div>
    <div id="resizableDiv">2</div>
</div>

<br/><button>Show/Hide</button>

＆＃13;

Answer 2

我尝试使用CSS3 flex-box模型。我为#parent及其子项

添加了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;
}

请参阅工作小提琴here。

虽然没有IE9学分:(

使<div>动态填充父级高度的剩余部分

2 个答案: