将父div扩展到最高定位的子项的高度

Question

I know that parent divs can't be expanded to the height of an absolutely-positioned child with pure CSS and I found one solution that addresses this with some js: http://jsfiddle.net/6csrV/7/

But what if you have multiple columns, each positioned absolutely, and you don't know which one will be tallest? For example:

<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>

To add yet another challenge, the number of columns may also differ, so it should be possible to target the generic "column" class rather than column1, column2, column3 etc...

And to make it even more of a challenge, is it possible to have this work only when the browser viewport is narrower than a specified number of pixels?

Answer 1

Use height:auto for the layer 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;
}