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

Question

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

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

提前致谢。

Answer 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