Behälter automatisch anpassen Höhe, um das absolut positionierte Kind aufzunehmen s

Gibt es eine Möglichkeit, die Container-DIV-Höhe automatisch anzupassen, um absolut positionierte untergeordnete DIVs aufzunehmen? Ich möchte so etwas bekommen

+-----------------------+
| container             |
|  +------+   +------+  |
|  | chld |   | chld |  |
|  |   1  |   |   2  |  |
|  |      |   |      |  |
|  +------+   +------+  |
|       +------+        |
|       | chld |        |
|       |   3  |        |
|       |      |        |
|       +------+        |
+-----------------------+

Ich versuche so etwas wie:

<div class="container" style="position: relative; border: solid thin">
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 5px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 30px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 15px; top: 30px;
                             border: dashed thin;"></div>
</div>

aber das “Container” div bleibt Null Höhe. Ich verstehe, dass dies das erwartete Verhalten sein könnte, da Elemente bei absoluter Positionierung aus dem Fluss “herausgenommen” werden, aber gibt es eine Problemumgehung dafür? (mit Ausnahme der Vorberechnung der resultierenden Höhe und der manuellen Einstellung)

Überlauf: automatisch

Das ist das Neue klarfix Methode, FYI. Der Container wird jedoch nicht immer auf seine Höhe erweitert höchste & absolut positioniert Kind.

Wenn Sie position:relative anstelle von position absolute verwenden, bleibt in der Seitenstruktur an der Stelle, an der sich das Element befinden sollte, ein leerer Raum, und dieser Raum entspricht der Höhe des verschobenen Elements.

Sie könnten also chld1 und chld2 schweben lassen, um sie nebeneinander zu bringen, fügen Sie eine obere und untere Polsterung hinzu, um chld 3 nach unten zu drücken, und verwenden Sie die relative Position, um sie auseinander zu teilen und sich auf eine beliebige Höhe zu bewegen. Verwenden Sie dann clear both auf chld3.

Etwas wie

#exp_outer {
  width: 400px;
  border: 1px solid black;
}
#chld1 {
  float: left;
  margin: 30px 0 20px;
  left: 50px
}
#chld2 {
  float: right;
  margin: 30px 0 20px;
  right: 50px;
}
#chld3 {
  left: 150px;
  clear: both;
}
.box {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid black;
}

<div id="exp_outer">
  <div id="chld1" class="box">Child1</div>
  <div id="chld2" class="box">Child2</div>
  <div id="chld3" class="box">Child3</div>
</div>

Am Ende habe ich Clearfix verwendet, damit kann ich die gewünschte Breite des Containers einstellen, und seine Höhe wird je nach Inhalt automatisch angepasst (dies funktioniert in allen Browsern).

<style>
        .inner_box {
            position: relative;
            float: left;
            width: 50px; 
            height: 50px; 
            border: dashed thin;
            margin: 5px 5px 5px;
            text-align: center;
        }

        .outer_box {
            position: relative; 
            top: 200px;
            border: solid thin; 
            width: 190px;
            //height: 1%;
        }

        .outer_box:after {
            content: '.'; 
            display: block; 
            clear: both; 
            visibility: hidden; 
            height: 0; 
            line-height: 0;
        }
    </style>

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box">2</div>
    <div class="inner_box">3</div>
    <div class="inner_box">4</div>
    <div class="inner_box">5</div>
    <div class="inner_box">6</div>
</div>

Nein. Die ganze Idee ist, dass ein absolut positioniertes Element sein übergeordnetes Layout nicht beeinflusst.

Versuchen Sie, Ihr Ziel zu erreichen, indem Sie Floats relativ positionieren, anstatt Divs absolut zu positionieren. Es ist nicht so bequem (weil die Startposition Ihrer Schwimmer nicht Arsch 0,0 ist), aber es wird funktionieren.

Ich habe mir ziemlich viel Mühe gegeben, dies zu erreichen, und jetzt, da ich eine Lösung habe, sieht es so aus, als wäre es so einfach gewesen, jedenfalls wird etwas jQuery/Javascript benötigt:

jQuery(window).load(function(){
    var valueCheck = [];
    jQuery('.projectsWrap .hentry').each(function(){
        var itemObj = jQuery(this);
        var itemValues = itemObj.position();
        var top = itemValues.top;
        var height = jQuery(this).height();
        var sum = top + height;
        valueCheck.push(sum);
    });
    var res = Math.max.apply(Math, valueCheck);
    jQuery('.projectsWrap').height(res);
});

Ich habe dieses kleine Skript in einem WordPress-Theme geschrieben und implementiert, daher sehen Sie, dass das “$” aus Kompatibilitätsgründen in “jQuery” konvertiert wird, aber wenn Sie WordPress nicht verwenden, sollten Sie es wieder auf “$” zurücksetzen.

Die Situation, in der ich mich befand, war noch schwieriger als die in der Frage, weil der Benutzer jedes Element autonom absolut im Container positionieren wollte und die Reihenfolge, in der die Elemente im Dom erschienen, nicht mit ihrer Position im Container in Beziehung stand: völlig unerwartet Ergebnisse (das erste Element im Dom kann beispielsweise als letztes unteres Element im Fenster erscheinen).

Auch die Höhen der Elemente waren alle unterschiedlich, alle unterschiedlichen Höhen und alle unterschiedlichen Spitzenwerte (Offset), ein Alptraum.

Das Skript ermittelt die Höhe und den oberen Wert jedes Elements, summiert sie und fügt diese Summe in ein Array ein. Das Array wird dann überprüft, um den größten Wert zu finden. Dieser Wert ist die Höhe, auf die der Container eingestellt wird, magisch!

Ich konnte keine einfache reine JavaScript-Lösung für dieses kleine Problem finden, also kommt es hier (Sie müssen Ihrem HTML-Code ID-Felder hinzufügen):

var containerBox = document.getElementById('container');
var statBoxBottom = document.getElementById('chld3').getBoundingClientRect().bottom + window.scrollY;
var mainDivBottom = containerBox.getBoundingClientRect().bottom + window.scrollY;
var boxHeightDiff = statBoxBottom - mainDivBottom;
if (boxHeightDiff > 0) 
    containerBox.style.height = Math.ceil( containerBox.offsetHeight + boxHeightDiff ) + 'px';

Es erhöht im Grunde die “Container”-Höhe basierend auf der absoluten unteren Position von “chld3”.

Wenn Sie dem .container div eine Höhe von 100% geben, sollte es in den meisten Browsern aus den untergeordneten Elementen berechnet werden, aber leider nicht in IE6 oder niedriger.