Wie kann ich ein übergeordnetes Div so erweitern, dass es zu seinem absolut positionierten untergeordneten Element passt?

Größe der übergeordneten Div-Höhe basierend auf der absolut positionierten untergeordneten Div-Größe ändern

Im Webdesign ist es oft notwendig, Elemente innerhalb eines übergeordneten Containers zu positionieren eine nichtlineare Mode. Dies kann durch absolute Positionierung erreicht werden, die das Element aus dem normalen Dokumentenfluss entfernt. Es tritt jedoch ein häufiges Problem auf, wenn versucht wird, die Höhe des übergeordneten Divs zu vergrößern, um das absolut positionierte untergeordnete Element aufzunehmen.

Problem

Berücksichtigen Sie das folgende HTML und CSS:

<div>
<pre class="brush:php;toolbar:false">parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

In diesem Szenario hat Kind2 eine dynamische Höhe und sollte unter Kind1 erscheinen. Das übergeordnete Div, #parent, wird jedoch nicht auf die Höhe von child2 erweitert.

Lösung

Das Problem entsteht, weil absolut positionierte Elemente aus entfernt werden der Fluss. Folglich werden sie von anderen Elementen ignoriert, was dazu führt, dass das übergeordnete Div child2 bei seiner Höhenberechnung nicht berücksichtigt.

Alternativen

Um dieses Problem zu beheben, gibt es zwei Hauptoptionen :

• Manuelle Größenänderung:Verwenden Sie einen Nicht-CSS-Ansatz, wie z. B. JavaScript, um Positionieren Sie die Divs neu und passen Sie die Höhe des übergeordneten Elements dynamisch an.
• CSS-Layouts: Verwenden Sie CSS-Flexbox oder Rasterlayout, um die visuelle Reihenfolge der Elemente umzukehren. Dies ermöglicht eine flexible Positionierung bei gleichzeitiger Aufrechterhaltung des Elementflusses.