如何根据下一个兄弟高度自动调整DIV高度？

Question

我正在寻找一种CSS布局解决方案（ IE9 + ），它将模仿“自动调整的表格单元格”，如下所示：

---

我唯一使用表格更改的是底部单元格高度，上部单元格自动响应更改。

以下是表格代码和 JSFiddle demo ，用于随机化底部单元格高度。

HTML：

<div>
    <table>
        <tr>
            <td>Auto Adjust</td>
        </tr>
        <tr>
            <td id="adjust">Fixed Height</td>
        </tr>
    </table>
</div>

CSS：

td {
   border:solid 1px red
}
table {
   width:100%;
   height:100%;
}
div {
   height:300px;
   border:solid 1px blue;
}

#adjust{
   height:50px;
}

问：如何使用现代布局技术实现相同目标？

Answer 1

这个怎么样？

http://jsfiddle.net/NicoO/HfpL6/4/

.wrap
{
    height:300px;
    border:solid 1px blue;
}
.table {
    width:100%;
    height:100%;
    display: table;
    border-spacing: 2px;
}

.row
{
    display: table-row;
}

.cell  
{
    display: table-cell;
    border:solid 1px red;
    vertical-align: middle;
}

#adjust{
    height:50px;
}

这个html：

<div class="wrap">
    <div class="table">
        <div class="row">
            <div class="cell">
                Auto Adjust
            </div>
        </div>
        <div class="row">
            <div id="adjust" class="cell">
                Fixed Height
            </div>
        </div>
    </div>
</div>

<强>更新

我看到的唯一其他可能性是使用 calc 你确定需要更多JS然后： http://jsfiddle.net/NicoO/HfpL6/7/

你需要让所有孩子都使用JS并为所有孩子申请一个新的高度。

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

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrap
{
    height:300px;
    border:solid 1px blue;
}
.table 
{
    width:100%;
    height:100%;
}

.row
{
    height: 50%; 
    position: relative;
}

.cell  
{
    border:solid 1px red;
    vertical-align: middle;
    position: absolute;
    top:2px;
    right:2px;
    bottom:2px;
    left:2px;
}

#adjust:not([style])
{
    background-color: green;

}

Answer 2

您可以尝试使用Flexbox。它旨在处理灵活和固定宽度的布局。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes