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

Question

I have to set auto height for relative positioned div which contains multiple absolute position div's inside it. Without mentioning height to the outer div positioned relative the content inside the absolute div is not visible due to overflow:hidden property.

Is there any Javascript to make this possible.. If so please advise me.

Thanks in advance.

Answer 1

Since absolute positioned children does not affect parents size, you should calculate the bounds of parent div manually. For instance to get height of the parent you should iterate over child elements and find maximum value of child's top plus height, and to get width you should find maximum left plus width pair. You can use the following function to adjust parent's width an height:

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';
}

the function assumes that you parent div have an id="parent"

Working example you can find here: http://jsbin.com/ifelur/1/edit