css вертикальная высота с положением: абсолютное

Question

У меня есть эта упрощенная структура скелета:

<div id='parent">
    <div id="content">
        <div id="child-1"></div>
        <div id="child-2"></div>
        <div id="child-3"></div>
    </div>
</div>

Я бы хотел, чтобы родительский div расширялся до высоты самого высокого дочернего элемента.Я могу сделать это без проблем, пока дети не занимают должное положение: абсолют, которым я хочу, чтобы они были.

Когда для дочерних элементов установлено абсолютное значение, рост родителей больше не зависит от высоты дочерних элементов.

Есть ли обходной путь для этого?

Спасибо

Answer 1

У вас есть пара вариантов в этой ситуации.

Первый - использовать {position: относительный} вместо абсолютного. Это сохранит элементы в потоке страницы, и родительский файл будет отображаться с нужным вам размером.

Другой вариант - использовать немного javascript, чтобы найти размер каждого дочернего элемента, определить, какой из них самый большой, а затем установить родительский элемент на эту высоту.

var children = document.getElementById('content').getElementsByTagName('div');

var max_child_height = 0;
for(i = 0; i < children.length ; i++){
    if(children[i].offsetHeight > max_child_height) {
        max_child_height = children[i].offsetHeight;
    }
}

document.getElementById('parent').height = max_child_height;

Answer 2

Я предполагаю, что элемент child-N расположен рядом.Пока вы делаете это, используя абсолютное позиционирование, вы также можете сделать это, используя float: left.Таким образом (после очистки) родитель будет иметь высоту самого высокого дочернего элемента.

#child-1, #child-2, #child3 {
  width: 200px;
  float: left;
}
/* now clear the float, otherwise #content would have no height*/
#content {
  overflow:hidden;/*normal browsers*/
  zoom:1;/*IE fix*/
}

Answer 3

Вы можете использовать JavaScript для решения этой проблемы.Или позиция: относительная http://plugins.jquery.com/project/Tallest Это может быть полезно