Wie Sie im folgenden CSS sehen können, möchte ich mich child2
vorher positionieren child1
. Dies liegt daran, dass die Website, die ich gerade entwickle, auch auf Mobilgeräten funktionieren child2
sollte, auf der sich die Website unten befinden sollte, da sie die gewünschte Navigation unter den Inhalten auf den Mobilgeräten enthält. - 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 haben können.
Ich weiß, dass absolut positionierte Elemente aus dem Fluss entfernt und daher von anderen Elementen ignoriert werden.
Ich habe versucht, overflow:hidden;
das übergeordnete Div festzulegen, aber das hat nicht geholfen, und das auch nicht clearfix
.
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, um dies zu tun.
quelle
Antworten:
Sie haben die Frage selbst beantwortet: "Ich weiß, dass absolut positionierte Elemente aus dem Fluss entfernt und von anderen Elementen ignoriert werden." Sie können die Größe der Eltern also nicht nach einem absolut positionierten Element einstellen.
Sie verwenden entweder feste Höhen oder Sie müssen JS einbeziehen.
quelle
Obwohl das Strecken auf Elemente mit
position: absolute
nicht möglich ist, gibt es häufig Lösungen, bei denen Sie die absolute Positionierung vermeiden und gleichzeitig den gleichen Effekt erzielen können. Schauen 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 schweben, das erste nach rechts und das zweite nach links, sodass das zweite zuerst angezeigt wird.
Fügen Sie zum Schluss dem Eltern einen Clearfix hinzu, und Sie sind fertig (siehe die die vollständige Lösung finden Geige ).
Solange sich das Element mit der absoluten Position oben im übergeordneten Element befindet, besteht im Allgemeinen eine gute Chance, dass Sie eine Problemumgehung finden, indem Sie das Element schweben lassen.
quelle
Feeela hat recht, aber Sie können einen Elternteil dazu bringen
div
, sich zu einem untergeordneten Element zusammenzuziehen / zu erweitern, wenn Sie Ihrediv
Position wie folgt umkehren:Dies sollte für Sie funktionieren.
quelle
Es gibt einen recht einfachen Weg, dies zu lösen.
Sie müssen nur den Inhalt von child1 und child2 in relativen Divs mit Anzeige duplizieren: keine in parent div. Sagen Sie child1_1 und child2_2. Setzen Sie child2_2 oben und child1_1 unten ein.
Wenn Ihre Abfrage (oder was auch immer) das absolute Div aufruft, setzen Sie einfach das entsprechende relative Div (child1_1 oder child2_2) mit display: block AND sichtbarkeit: hidden. Das relative Kind ist immer noch unsichtbar, erhöht jedoch den Div der Eltern.
quelle
Mit reinem JavaScript müssen Sie nur die Höhe Ihres untergeordneten
static position
Elements.child1
mit der Methode getComputedStyle () abrufen und diesen Abrufwertpadding-top
mithilfe der Eigenschaft HTMLElement.style als denselben Wert für dasselbe untergeordnete Element festlegen .Überprüfen Sie das folgende Code-Snippet und führen Sie es aus, um ein praktisches Beispiel für das zu finden, was ich oben beschrieben habe:
quelle
Ich hatte ein ähnliches Problem. Um dies zu lösen (anstatt die Höhe des Iframes mithilfe des Körpers, Dokuments oder Fensters zu berechnen), habe ich ein Div erstellt, das den gesamten Seiteninhalt umschließt (z. B. ein Div mit einer ID = "Seite"), und dann seine Höhe verwendet.
quelle
Diese Frage wurde 2012 vor der Flexbox gestellt. Der richtige Weg, um dieses Problem mit modernem CSS zu lösen, ist eine Medienabfrage und eine Flex-Spaltenumkehr für mobile Geräte. Es ist keine absolute Positionierung erforderlich.
https://jsfiddle.net/tnhsaesop/vjftq198/3/
HTML:
CSS:
quelle
Ich habe eine andere Lösung gefunden, die ich nicht liebe, aber die Arbeit erledige.
Duplizieren Sie die untergeordneten Elemente grundsätzlich so, dass die Duplikate nicht sichtbar sind.
CSS:
Wenn diese untergeordneten Elemente wenig Markup enthalten, ist die Auswirkung gering.
quelle
Hier ist das JS-Beispiel:
---------- jQuery JS Beispiel --------------------
quelle
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
CSS
Sie können mit der Positionierung des Hack-Divs spielen, um zu beeinflussen, wo sich das Kind selbst positioniert.
Hier ist ein Ausschnitt:
quelle
Es gibt jetzt einen besseren Weg, dies zu tun. Sie können die Eigenschaft bottom verwenden.
quelle
Dies ist sehr ähnlich zu dem, was @ChrisC vorgeschlagen hat. Es wird kein absolut positioniertes Element verwendet, sondern ein relatives. Vielleicht könnte für Sie arbeiten
Und dein CSS gefällt so:
https://jsfiddle.net/royriojas/dndjwa6t/
quelle
Betrachten Sie auch den nächsten Ansatz:
CSS:
Auch da Sie versuchen, Divs neu zu positionieren, sollten Sie das CSS-Raster berücksichtigen
quelle
Absolute Ansichten positionieren sich gegen den nächsten Vorfahren, der nicht statisch positioniert ist (
position: static
). Wenn Sie also eine absolute Ansicht gegen einen bestimmten Elternteil positionieren möchten, setzen Sie den Elternteilposition
aufrelative
und das Kindposition
aufabsolute
quelle
Versuchen Sie dies, es wurde für mich gearbeitet
Die untergeordnete Größe wird auf die übergeordnete Größe eingestellt
quelle