計算絕對定位的嵌套子代的高度

Question

我一直在解決這個問題

 .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>

你們如何解決這樣的問題？

我試圖用javscript解決它，但是我的解決方案看起來不對。

 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>

它使用setInteval來檢查是否有任何嵌套的子級更改了其高度，然后重新計算了父級框的高度。 實際上，由於性能和代碼美觀，我需要找到更好的解決方案。

與實際重新計算相比，摘要非常簡化。

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

Answer 1

我已經通過相對定位解決了這個問題。

對於復雜的“絕對位置”動畫，我制作了將絕對值轉換為相對值的功能。

例如

 .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並保持其大小和位置。

計算絕對定位的嵌套子代的高度

問題描述

1 個解決方案

解決方案1
0 已采納 2016-08-17 12:53:09

計算絕對定位的嵌套子代的高度

問題描述

1 個解決方案

解決方案1 0 已采納 2016-08-17 12:53:09

解決方案1
0 已采納 2016-08-17 12:53:09