如何根据下一个兄弟高度自动调整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