如何根據下一個兄弟高度自動調整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; 
} 

Q：我怎樣才能做到用現代佈局技術相同的目標？

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> 

更新

唯一的可能我看到的是使用鈣你肯定需要一些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