正在计算绝对定位的嵌套子项的高度

Calculating height of absolute positioned nested childs

本文关键字：嵌套 高度 定位 计算      更新时间：2023-09-26

我一直在处理这个的问题

.autoHeightParent {
  width: 500px; /* just for example */
  position: relative;
} 
.absolutePosChild {
  /* absolute is required to make pretty drag and drop transitions with interpolating left property */
  position: absolute; 
  display:flex;
  flex-direction: column;
  border: 1px solid green;
}
.absolutePosChild div {
  width: 100%;
}
<div class="autoHeightParent" style="height:170px;">
  <div class="absolutePosChild" style="left: 0px; width: 100px;">
    <div>
      Child content
    </div>
  </div>
  <div class="absolutePosChild" style="left: 100px; width: 150px;">
    <div>
      Child content with nesting
    </div>
    <!-- !! NESTING  -->
    <div class="autoHeightParent">
      <div class="absolutePosChild" style="left: 0px; width: 50px;">
        <div>
          We don't know this height too
        </div>
      </div>
      <div class="absolutePosChild" style="left: 50px; width: 100px;">
        <div>
          G.Child 2
        </div>
      </div>
    </div>
  </div>
</div>
<div style="border: 1px solid red">
I need to automatcally calculate height of the box above to make THIS box right after it. For now you can see hardcoded 170px height.
</div>

你们是怎么解决这样的问题的？

我试着用JavaScript来解决这个问题，但我的解决方案看起来不对。

function setRootHeight() {
  var root = document.getElementById("root");
  var allChilds = root.getElementsByTagName("*");
  var rootRect = root.getBoundingClientRect();
  var maxChildHeight = 0;
  _.each(allChilds, function(item) {
    var nodeRect = item.getBoundingClientRect();
    var nodeHeightRelativeToRoot = ( nodeRect.top + nodeRect.height ) - rootRect.top;
    if ( nodeHeightRelativeToRoot > maxChildHeight) maxChildHeight = nodeHeightRelativeToRoot;
  });
  root.style.height = maxChildHeight + "px";
}
setInterval(setRootHeight, 300);
.autoHeightParent {
  width: 500px; /* just for example */
  position: relative;
} 
.absolutePosChild {
  /* absolute is required to make pretty drag and drop transitions with interpolating left property */
  position: absolute; 
  display:flex;
  flex-direction: column;
  border: 1px solid green;
}
.absolutePosChild div {
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
Test content Above
<div id="root" class="autoHeightParent">
  <div class="absolutePosChild" style="left: 0px; width: 100px;">
    <div>
      Child content
    </div>
  </div>
  <div class="absolutePosChild" style="left: 100px; width: 150px;">
    <div>
      Child content with nesting
    </div>
    <!-- !! NESTING  -->
    <div class="autoHeightParent">
      <div class="absolutePosChild" style="left: 0px; width: 50px;">
        <div>
          We don't know this height too
        </div>
      </div>
      <div class="absolutePosChild" style="left: 50px; width: 100px;">
        <div>
          G.Child 2
        </div>
      </div>
    </div>
  </div>
</div>
<div style="border: 1px solid red">
Visualization of that height was calculated
</div>

它使用setIntegal来检查是否有嵌套的子框更改了它的高度，然后重新计算父框的高度。实际上，由于性能和代码的美观，我需要找到更好的解决方案。

与实际的重新计算相比，代码段非常简化。

我可以自由使用flexbox或任何可以解决此的工具

我已经用相对定位解决了这个问题。

对于我的情结"；绝对位置"；我制作的动画函数可以将绝对值转换为相对值。

.autoHeightParent {
  width: 500px; /* just for example */
  position: relative;
  display: flex;
} 
.absolutePosChild {
  /* relative position here must do absolutes' job here */
  position: relative; 
  display:flex;
  flex-direction: column;
  border: 1px solid green;
}
.absolutePosChild div {
  width: 100%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="autoHeightParent">
  <div class="absolutePosChild">
    <div>
      Child content
    </div>
  </div>
  <div class="absolutePosChild">
    <div>
      Child content with nesting
    </div>
    <!-- !! NESTING  -->
    <div class="autoHeightParent">
      <div class="absolutePosChild">
        <div>
          We don't know this height too
        </div>
      </div>
      <div class="absolutePosChild">
        <div>
          G.Child 2
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

您可以看到父框自动调整大小。但现在我可以将translate3d用于任何子框，父框保持其大小和位置。

相关文章：