it-swarm.com.de

Absolut positioniertes div erweitern übergeordnete div-Höhe

Wie Sie im CSS unten sehen können, möchte ich, dass sich child2 vor child1 positioniert. Dies liegt daran, dass die Site, die ich gerade entwickle, auch auf mobilen Geräten funktionieren sollte, auf denen sich das child2 unten befinden sollte, da es die Navigation enthält, die ich unter den Inhalten auf den mobilen Geräten möchte. - Warum nicht 2 Masterseiten? Dies sind die einzigen 2 Divs, die im gesamten HTML-Code neu positioniert werden. Daher sind 2 Masterseiten für diese geringfügige Änderung ein Overkill.

HTML:

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2 hat eine dynamische Höhe, da verschiedene Unterwebsites mehr oder weniger Navigationselemente enthalten können.

Ich weiß, dass absolut positionierte Elemente aus dem Fluss entfernt werden und von anderen Elementen ignoriert werden.
Ich habe versucht, overflow:hidden; für das übergeordnete div einzustellen, aber das hat nicht geholfen.

Mein letzter Ausweg wird Javascript sein, um die beiden Divs entsprechend neu zu positionieren, aber jetzt werde ich versuchen, herauszufinden, ob es eine nicht-Javascript-Methode gibt.

156
user557419

Sie haben die Frage selbst beantwortet: "Ich weiß, dass absolut positionierte Elemente aus dem Fluss entfernt werden und von anderen Elementen ignoriert werden." Sie können also die Elternhöhe nicht entsprechend einem absolut positionierten Element einstellen.

Sie verwenden entweder feste Höhen oder müssen JS einbeziehen.

125
feeela

Obwohl das Dehnen auf Elemente mit position: absolute nicht möglich ist, gibt es oft Lösungen, bei denen Sie die absolute Positionierung vermeiden können, während Sie denselben Effekt erzielen. Sehen Sie sich diese Geige an, die das Problem in Ihrem speziellen Fall löst. http://jsfiddle.net/gS9q7/ 

Der Trick besteht darin, die Elementreihenfolge umzukehren, indem beide Elemente verschoben werden, das erste nach rechts, das zweite nach links, sodass das zweite zuerst erscheint.

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

Fügen Sie dem übergeordneten Element einen Clearfix hinzu, und Sie sind fertig (siehe Geige für die vollständige Lösung).

Solange sich das Element mit der absoluten Position oben auf dem übergeordneten Element befindet, ist die Wahrscheinlichkeit groß, dass Sie eine Problemumgehung finden, indem Sie das Element verschieben.

11
lex82

Feeela ist richtig, aber Sie können eine übergeordnete div erhalten, die sich zu einem untergeordneten Element zusammenzieht/erweitert, wenn Sie Ihre div-Positionierung wie folgt umkehren: 

.parent{
    postion: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child{
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

Das sollte für Sie funktionieren.

8
ChrisC

Es gibt einen ganz einfachen Weg, dies zu lösen.

Sie müssen lediglich den Inhalt von child1 und child2 in relativen divs mit Anzeige kopieren: none in parent div. Sagen Sie child1_1 und child2_2. Setzen Sie child2_2 oben und child1_1 unten.

Wenn Ihre Jquery (oder was auch immer) das absolute div aufruft, setzen Sie einfach das entsprechende relative div (child1_1 oder child2_2) mit display: block AND UND Sichtbarkeit: hidden. Das relative Kind ist immer noch unsichtbar, aber das Div der Eltern wird höher.

7
MMB

Es gibt einen sehr einfachen Hack, der dieses Problem behebt

Hier ist eine Codesandbox, die die Lösung veranschaulicht: https://codesandbox.io/s/00w06z1n5l

HTML

<div id="parent">
  <div class="hack">
   <div class="child">
   </div>
  </div>
</div>

CSS

.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }

sie können mit der Positionierung des Hack-Div spielen, um die Position des Kindes zu beeinflussen.

Hier ist ein Ausschnitt:

html {
  font-family: sans-serif;
  text-align: center;
}

.container {
  border: 2px solid gray;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.stuff-the-middle {
  background: papayawhip
    url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67");
  flex: 1;
}

.parent {
  background: palevioletred;
  position: relative;
}

.hack {
  position: absolute;
  left: 0;
  top:0;
  right: 0;
}
.child {
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
    <div class="container">
      <div class="stuff-the-middle">
        I have stuff annoyingly in th emiddle
      </div>
      <div class="parent">
        <div class="hack">
          <div class="child">
            I'm inside of my parent but absolutely on top
          </div>
        </div>
        I'm the parent
        <br /> You can modify my height
        <br /> and my child is always on top
        <br /> absolutely on top
        <br /> try removing this text
      </div>
    </div>

2
bernatfortet

Ich hatte ein ähnliches Problem ... Um dieses Problem zu lösen (anstatt die Höhe des Iframes mithilfe des Hauptteils, Dokuments oder Fensters zu berechnen), habe ich ein div erstellt, das den gesamten Seiteninhalt umschließt (beispielsweise ein div mit einer id = "page"). und dann habe ich seine Höhe verwendet.

2
Juliano

Ich habe eine andere Lösung gefunden, die ich nicht liebe, aber die Arbeit erledigt.

Duplizieren Sie die untergeordneten Elemente grundsätzlich so, dass die Duplikate nicht sichtbar sind.

<div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

.width-calc {
    height: 0;
    overflow: hidden;
}

Wenn diese untergeordneten Elemente wenig Markup enthalten, ist die Auswirkung gering.

1
btx9000

"Sie verwenden entweder feste Höhen oder Sie müssen JS einbeziehen."

Hier ist das JS-Beispiel:

---------- jQuery JS - Beispiel --------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
        var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();

        $(containerSelector).children().each(function (i){
            if (maxX < parseInt($(this).css('left')) + $(this).width()){
                maxX = parseInt($(this).css('left')) + $(this).width();
            }
            if (maxY < parseInt($(this).css('top')) + $(this).height()){
                maxY = parseInt($(this).css('top')) + $(this).height();
            }
        });
        return {
            'width': maxX,
            'height': maxY
        }
    }

    var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
    $("#SpecBody").width(specBodySize.width);
    $("#SpecBody").height(specBodySize.height);
1
Nikolay

Dies ist dem von @ChrisC vorgeschlagenen sehr ähnlich. Es verwendet kein absolut positioniertes Element, sondern ein relatives Element. Könnte vielleicht für dich arbeiten 

<div class="container">
  <div class="my-child"></div>
</div>

Und deine css so:

.container{
    background-color: red;
    position: relative;
    border: 1px solid black;
    width: 100%;
}

.my-child{
    position: relative;
    top: 0;
    left: 100%;
    height: 100px;
    width: 100px;
    margin-left: -100px;
    background-color: blue;
}

https://jsfiddle.net/royriojas/dndjwa6t/

0
roy riojas

Es gibt einen besseren Weg, dies jetzt zu tun. Sie können die bottom-Eigenschaft verwenden.

    .my-element {
      position: absolute;
      bottom: 30px;
    }
0
rlasch

Betrachten Sie auch den nächsten Ansatz:

CSS: 

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

Da Sie versuchen, Divs neu zu positionieren, sollten Sie das CSS-Raster in Betracht ziehen

0
Iegor Benzyk

Bei reinem JavaScript müssen Sie nur die Höhe Ihres static position-untergeordneten Elements .child1 mithilfe der getComputedStyle () -Methode abrufen und diesen Abrufwert mit HTMLElement als padding-top für dasselbe Kind festlegen .style - Eigenschaft.


Überprüfen Sie das folgende Code Snippet und führen Sie es aus, um ein praktisches Beispiel für das, was ich oben beschrieben habe, auszuführen:

/* JavaScript */

var child1 = document.querySelector(".child1");
var parent = document.getElementById("parent");

var childHeight = parseInt(window.getComputedStyle(child1).height) + "px";
child1.style.paddingTop = childHeight;
/* CSS */

#parent { position: relative; width: 100%; }
.child1 { width: auto; }
.child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
html, body { width: 100%;height: 100%; margin: 0; padding: 0; }
<!-- HTML -->

<div id="parent">
    <div class="child1">STATIC</div>
    <div class="child2">ABSOLUTE</div>
</div>

0
AndrewL64