替代绝对定位以更新父母身高的方法

Question

我正在图书馆画括号。

我正在使用JavaScript计算每个元素（匹配和线条）的坐标。每个元素都有position: absolute;和使用left和top来设置它们的x和y坐标。

因为我正在使用，position: absolute;所以必须将父级设置为，以position: relative;使子级相对于其父级定位。

直到我注意到父母的身高没有从孩子的身高开始更新，这才算完美，因为position: absolute;元素是从文档流中删除的。

我需要父级具有高度，以便可以在下面放置其他元素，并给出父级样式，例如background-color...

1. 除了使用x和y坐标的绝对定位之外，还有其他替代方法可以将其保留在文档流中以允许父级width并height自动调整吗？

2. 或者，如果不可能的话，可以使用香草javascript（没有jQuery或其他库）来查找父div内容的宽度和高度。如果可能的话，我可以通过javascript 设置父代width和height样式。

到目前为止我尝试过的

1. 我试图让孩子们选择position: relative;，position: absolute;如果您只有一个孩子，我相信可以代替他们工作。但是，如果有一个以上的孩子，则这些孩子不是相对于父母，而是现在相对于前一个孩子，这使事情变得混乱。

2. 即使父级没有高度，页面上仍然有一个垂直滚动条。使用JavaScript，我试图让scrollHeight与height等元件document，document.body和window。这不起作用，因为undefined结果是错误的或结果错误的。

现在，我的临时解决方案是将body高度设置为2500px应该达到的最高高度。问题在于，总会有一个滚动条，大多数情况下滚动到无。

码

<div class="BrackChart_wrapper">
    <div class="BrackChart_match"> ... </div>
    <div class="BrackChart_line"></div>
    etc.
</div>

.BrackChart_wrapper {
    position: relative;
    top: 0px;
    left: 0px;
}

.BrackChart_match, .BrackChart_line {
    position: absolute;
}

谢谢您的帮助，万分感谢！

JSFiddle：https : //jsfiddle.net/jmjcocq8/1/

解决方案：https : //jsfiddle.net/jmjcocq8/2/

Answer 1

我相当确定没有其他选择可以让您绝对定位子级（相对于其父级）并使它们保持在流程中，以便它们对父级的大小做出贡献。

但由于您自己计算元素的位置，并且知道它们的高度，因此您可以根据最低子元素的 y 加高度来设置父元素的高度。

您还没有显示您的代码，但例如：

var forEach = Array.prototype.forEach;
function positionChildren(parent) {
  var left = 0;
  var top = 0;
  forEach.call(parent.children, function(child, index) {
    child.style.left = left + "px";
    child.style.top = top + "px";
    left += 20;
    top += 10;
  });
  var height = top - 10 + 1 + parent.lastElementChild.clientHeight;
  console.log("height = " + height);
  parent.style.height = height + "px";
}

positionChildren(document.getElementById("parent"));

#parent {
  border: 1px solid black;
  background-color: #ddd;
  position: relative;
}
.child {
  position: absolute;
  border: 1px solid blue;
  padding: 0;
  margin: 0;
}

<div id="parent">
  <div class="child">Child1</div>
  <div class="child">Child2</div>
  <div class="child">Child3</div>
</div>