Absolut positionierte 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 Mobilgeräten funktionieren sollte, auf denen sich das Kind 2 unten befinden sollte, da es 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 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 werden und von anderen Elementen ignoriert werden.
Ich habe versucht, Einstellungen vorzunehmenoverflow:hidden; auf dem übergeordneten div, aber das hat nicht geholfen, auch das clearfix.

Mein letzter Ausweg wird Javascript sein, um die beiden Divs entsprechend neu zu positionieren, aber im Moment werde ich versuchen, herauszufinden, ob es eine Möglichkeit gibt, dies ohne Javascript zu tun.

Antworten auf die Frage(14)

Ihre Antwort auf die Frage