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

Question

我正在开发一个绘制括号的库。

我正在使用javascript计算每个元素（匹配和行）的坐标。每个元素都有position: absolute;，并使用left和top来设置x和y坐标。

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

这是完美的工作，直到我注意到父母的高度没有从其子项更新，因为position: absolute;元素从文档流中取出。

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

等样式

1. 是否有使用x和y坐标的绝对定位的替代方法，但是还将它们保留在文档流中以允许父级width和height自动调整？

2. 或者，如果那是不可能的，那么使用vanilla javascript（没有jQuery或其他库）来找出父div的内容的宽度和高度。如果可以，我可以通过javascript设置父width和height个样式。

到目前为止我尝试了什么

1. 我尝试将孩子设置为position: relative;而不是position: absolute;，如果您只有一个孩子，我相信这会有效。但是，如果有一个以上的孩子，这些孩子与父母不相关，但现在与前一个孩子有关，这会使事情变得混乱。



1. 即使父级没有高度，页面上仍然有一个垂直滚动条。使用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; } 。这个问题是总会有一个滚动条，大部分时间都滚动到空。

代码

{{1}}

感谢您的帮助，非常感谢！

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

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

Answer 1

我相当确定没有其他选择，两者都可以让你绝对定位孩子（相对于他们的父母）并将他们留在流程中，以便他们贡献父母的大小。

但是既然你自己计算了元素的位置，并且你知道它们的高度，你可以根据最低的孩子的y加上身高来设置父母的身高。

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

＆＃13;

＆＃13;

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"));

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;