it-swarm.com.de

automatische Anpassung der Höhe des Containers <DIV> an absolut positionierte untergeordnete DIV-Werte

gibt es eine Möglichkeit, die Container-DIV-Höhe automatisch anzupassen, um absolut positionierte Child-DIVs unterzubringen?

 + ----------------------- + 
 | Behälter | 
 | + ------ + + ------ + | 
 | | 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 der "Container" div bleibt Nullhöhe. Ich verstehe, dass dies das erwartete Verhalten sein kann, da Elemente aus dem Fluss herausgenommen werden, wenn sie absolut positioniert sind. (außer zur Vorberechnung der resultierenden Höhe und zur manuellen Einstellung)

29

Wenn Sie position: relative anstelle von absolute verwenden, verbleibt ein leerer Bereich in der Seitenstruktur, in der sich das Element befinden soll. Dieser Raum entspricht der Höhe des Elements, das Sie verschoben haben.

Sie können also chld1 und chld2 nebeneinander verschieben, die obere und untere Polsterung zu Push chld 3 nach unten hinzufügen und die relative Position verwenden, um sie voneinander zu trennen und auf eine beliebige Höhe zu verschieben. Dann verwenden Sie clear beide auf chld3.

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

9
wheresrhys

Überlauf: Auto

Dies ist die neue clearfix - Methode, FYI. Es erweitert jedoch den Container nicht immer auf die Höhe seines höchsten & absolut positionierten Kindes.

10
Ahmad Bagadood

am Ende habe ich clearfix verwendet. Dadurch kann ich die gewünschte Breite des Containers einstellen. Die 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>
4

Die ganze Idee ist, dass absolut positioniertes Element keinen Einfluss auf das übergeordnete Layout hat. 

Versuchen Sie, Ihr Ziel zu erreichen, indem Sie statt der absoluten Positionierung von Divs Floats relativ positionieren. Es ist nicht so bequem (weil die Startposition Ihres Schwimmers nicht 0,0 ist), aber es funktioniert.

2
buti-oxa

Ich habe ziemlich viel gestört, um dies zu erreichen, und jetzt, wo ich eine Lösung habe, sieht es so aus, als wäre es so einfach gewesen, jedenfalls ist etwas jQuery/Javascript erforderlich:

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. Sie sehen, dass "$" aus Kompatibilitätsgründen in "jQuery" konvertiert wird. Wenn Sie jedoch nicht WordPress verwenden, sollten Sie sie auf "$" zurücksetzen.

Die Situation, in der ich mich befand, war sogar noch schwieriger als in der Frage, da der Benutzer jedes Element in dem Container autonom und absolut positionieren wollte und die Reihenfolge, in der Elemente im Dom angezeigt wurden, nicht mit ihrer Position im Container zusammenhängt: 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 Höhen und alle unterschiedlichen Spitzenwerte (Versatz), ein Albtraum.

Das Skript holt die Höhe und den höchsten Wert jedes Elements, summiert sie und fügt diese Summe in ein Array ein. Das Array wird daraufhin geprüft, um den größten Wert zu ermitteln. Dieser Wert gibt die Höhe an, auf die der Container gesetzt wird.

1
Nicola

Ich konnte keine einfache Problemumgehung mit reinem Javascript für dieses kleine Problem finden. Hier kommt es (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 Wesentlichen die Höhe des Containers basierend auf der absoluten unteren Position von "chld3".

0