如何为包含多个绝对 div 的相对定位 div 设置动态高度答案

【问题标题】：how to set dynamic height for a relative positioned div which contains multiple absolute div如何为包含多个绝对 div 的相对定位 div 设置动态高度
【发布时间】：2013-05-16 16:45:35
【问题描述】：

我必须为其中包含多个绝对位置 div 的相对定位 div 设置自动高度。不提及相对于外部 div 定位的高度，由于 overflow:hidden 属性，绝对 div 内的内容不可见。

是否有任何 Javascript 可以使这成为可能。如果有，请告诉我。

提前致谢。

【问题讨论】：

或者您可以删除overflow:hidden 并且内容将可见。
为什么你的 div 上有 absolute 孩子？
@elclanrs clearfix 不适用于 absolute 元素。它适用于float 元素。

标签： javascript css-position

【解决方案1】：

由于绝对定位的子元素不会影响父元素的大小，因此您应该手动计算父 div 的边界。例如，要获取父元素的高度，您应该遍历子元素并找到子元素顶部加高度的最大值，而要获取宽度，您应该找到最大左加宽度对。您可以使用以下函数来调整父母的宽度和高度：

function setSize() {
  var i, count,
      maxWidth = 0,
      maxHeight = 0,
      top, left, width, height,
      parent = document.getElementById('parent');

  for(i=0,count=parent.childNodes.length;i<count;i++) {
    if(parent.childNodes[i].nodeType === 1) {
      top = parent.childNodes[i].offsetTop;
      left = parent.childNodes[i].offsetLeft;
      width = parent.childNodes[i].offsetWidth;
      height = parent.childNodes[i].offsetHeight;
      if(top + height > maxHeight) {
        maxHeight = top + height;
      }
      if(left + width > maxWidth) {
        maxWidth = left + width;
      }
    }
  }
  parent.style.width = maxWidth + 'px';
  parent.style.height = maxHeight + 'px';
}

该函数假定您的父 div 有一个 id="parent"

您可以在此处找到工作示例：http://jsbin.com/ifelur/1/edit

【讨论】：