Alternative zur absoluten Positionierung, die die Elternhöhe aktualisiert

Question

Ich arbeite an einer Bibliothek, die Klammern zeichnet.

Ich berechne die Koordinaten jedes Elements (Streichhölzer und Linien) mit Javascript. Jedes Element hat position: absolute; und verwendet left und top, um ihre x und y Koordinaten festzulegen.

Da ich position: absolute; verwende, ist es erforderlich, das übergeordnete Element auf position: relative; festzulegen, damit die untergeordneten Elemente relativ zu ihrem übergeordneten Element positioniert werden.

Das war perfekt arbeiten, bis ich, dass die Eltern Höhe bemerkte nicht von seinen Kindern wurde aktualisiert wird, weil position: absolute; Elemente aus dem Fluss des Dokuments getroffen werden.

muss ich die Eltern Höhe haben, so dass ich andere Elemente darunter platzieren können, und geben die übergeordneten Stile wie background-color ...

1. Gibt es eine Alternative zur absoluten Positionierung, die x und y verwendet Koordinaten aber hält sie auch in den Fluss des Dokuments, damit die Eltern width und height automatisch anpassen?

2. Oder, wenn das nicht möglich ist, ist es weg mit Vanille javascript (keine jQuery oder andere Bibliotheken), um die Breite und Höhe des Inhalts des Elternteils div. Wenn das möglich ist, kann ich einfach die width und height Stile des Elternteils durch Javascript setzen.

Was ich versucht habe bisher

1. Ich habe versucht, die Kinder zu position: relative; statt position: absolute; zu setzen, die ich arbeiten würde glauben, wenn Sie nur ein Kind haben. Bei mehr als einem Kind sind die Kinder jedoch nicht relativ zum Elternteil, sondern sind nun relativ zum vorherigen Kind, was die Dinge durcheinander bringt.

2. Auch wenn die Eltern keine Höhe hat es noch auf der Seite eine vertikale Bildlaufleiste ist. Mit Javascript versuchte ich, die scrollHeight und height Elemente wie document, document.body und window zu bekommen. Dies hat nicht funktioniert, weil entweder das Ergebnis undefined war oder das Ergebnis falsch war.

Gerade jetzt meine temporäre Lösung ist body Höhe 2500px zu setzen, die die höchste es jemals sein müssen sein sollte. Das Problem dabei ist, dass es immer eine Bildlaufleiste geben wird, die meistens zu nichts scrollt.

-Code

<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; 
} 

Sie für die Hilfe danken, sehr geschätzt!

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

Lösung: https://jsfiddle.net/jmjcocq8/2/

Answer 1

Ich bin ziemlich sicher, dass keine Alternative gibt es, dass beide können Sie die Kinder positionieren absolut (relativ zu ihren Eltern) und hält sie in der Strömung so dass sie zur Größe des Elternteils beitragen.

Da Sie jedoch die Positionen der Elemente selbst berechnen und wissen, wie groß diese sind, können Sie die Höhe des Elternelements auf der Basis des niedrigsten Kindes plus Höhe festlegen.

Sie haben Ihren Code nicht gezeigt, aber zum Beispiel:

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>