javascript - 将父 div 扩展到 TALLEST 绝对定位子项的高度

Question

我知道不能使用纯 CSS 将父级 div 扩展到绝对定位的子级的高度，我找到了一个解决方案，可以用一些 js 解决这个问题:http://jsfiddle.net/6csrV/7/

但是如果您有多个列，每个列都是绝对定位的，并且您不知道哪一个最高呢？例如:

<div class="parentWrapper">
    <div class="column column1">This content may be 4 lines long</div>
    <div class="column column2">This content may be 8 lines long</div>
    <div class="column column3">This content may be 5 lines long</div>
</div>

要增加另一个挑战，列数也可能不同，因此应该可以针对通用“列”类而不是 column1、column2、column3 等...

而且更具挑战性的是，是否可以仅在浏览器视口(viewport)窄于指定像素数时使这项工作有效？

Answer 1

对图层使用高度:自动 http://jsfiddle.net/saysiva/PuVvh/1/

#container {
width:500px;
position:absolute;
left:200px;
vertical-align:center;
}

#mainContainer {
border:0px solid red;
height:auto;
}

#menu {
background-color:#FFD700;
height:auto;
width:100px;
float:left;
}

#content {
background-color:#EEEEEE;
height:auto;
width:400px;
float:left;
}