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

概述我正在寻找一个CSS布局解决方案(IE9),它将模仿“自动调节表格单元格”,如下所示： 我使用表格唯一改变的是底部单元格高度,上部单元格自动响应变化. 这是表格代码和随机化底部单元格高度的JSFiddle demo. HTML： <div> <table> <tr> <td>Auto Adjust</td> </tr> 我正在寻找一个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;}

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

解决方法 这个怎么样？

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 >    <div >        <div >            <div >                auto Adjust            </div>        </div>        <div >            <div ID="adjust" >                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;}

总结

以上是内存溢出为你收集整理的html – 如何根据下一个兄弟高度自动调整DIV高度？全部内容，希望文章能够帮你解决html – 如何根据下一个兄弟高度自动调整DIV高度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。