html - 如何根据下一个 sibling 的高度自动调整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/

你需要让所有的 child 都有 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;

}