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：relative}而不是绝对。这会将元素保留在页面流中，而父元素将使用您要查找的大小进行渲染。

另一种选择是使用一些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 它可能有用

css垂直高度与位置：绝对

3 个答案: