Блог

Я знаю, что родительские подразделения не могут быть расширены до высоты абсолютно позиционируемого дочернего элемента с помощью чистого CSS, и я нашел одно решение, которое решает эту проблему с помощью некоторого 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>
  

Чтобы добавить еще одну проблему, количество столбцов также может отличаться, поэтому должна быть возможность настроить таргетинг на общий класс «column», а не на column1, column2, column3 и т.д…

И чтобы сделать это еще более сложной задачей, возможно ли, чтобы эта работа выполнялась только тогда, когда окно просмотра браузера уже указанного количества пикселей?

Используйте height:auto для слоя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;
}