替代绝对定位的方法，同时更新父元素高度

Question

替代绝对定位的方法，同时更新父元素高度

javascripthtmlcss

5

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

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

由于我使用了position: absolute;，所以需要将父元素设置为position: relative;，以便子元素相对于其父元素定位。

这个方案一开始运行得很完美，直到我发现父元素的高度没有从其子元素中更新，因为使用 position: absolute; 属性的元素会脱离文档流。

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

是否有替代绝对定位的方法，可以使用 x 和 y 坐标，但同时保持元素在文档流中，以允许父元素的 width 和 height 自动调整？
如果不可能，是否有办法使用原生 JavaScript（没有 jQuery 或其他库）来查找父 div 内容的宽度和高度。如果可以，我可以通过 JavaScript 设置父元素的 width 和 height 样式。

我已经尝试过的方法

我尝试将子元素设置为position: relative;而不是position: absolute;，我相信如果只有一个子元素，这样做会起作用。然而，如果有多个子元素，它们不再相对于父元素，而是相对于前一个子元素，从而导致混乱。

即使父元素没有高度，页面上仍然有垂直滚动条。我试图使用javascript获取document、document.body和window等元素的scrollHeight和height，但这并没有奏效，因为结果要么是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/

Solution: https://jsfiddle.net/jmjcocq8/2/

- David Callanan

1

@pokeybit：OP在上面的帖子中提到了这一点，并描述了为什么它对他不起作用。 - T.J. Crowder

1

好问题，我也希望有人能够仅使用CSS回答它。如果可能的话。 - sagar

抱歉，@David。 - pokeybit

2

这种问题用小把戏会很好。 - abeyaz

1

@abeyaz和David - 不是一个小提琴，而是一个Stack Snippet，因此整个内容都在本网站上。 - T.J. Crowder

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

我相信没有其他方法既可以让你绝对定位子元素（相对于其父元素），又可以使它们保持在流中，从而对父元素的大小产生贡献。

但是，由于您自己计算元素的位置并且知道它们的高度，因此您可以根据最低子元素的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>