Wie verhindere ich, dass Eltern absolut positionierter Elemente kollabieren

Question

Wie kann ich verhindern, dass die Eltern eines absolut positionierten Elements kollabieren?

Im folgenden Code wird die Höhe des äußeren div 0:

<div id="outer" style="position: relative;"> 
    <div id="inner" style="position: absolute; height: 100px;"> 
     <p>This is the inner content.</p> 
    </div>    
</div> 

Dies ist sehr ähnlich zu dieser Frage How do you keep parents of floated elements from collapsing?, die mit Floats befasst sich jedoch habe ich versucht, einige der Lösungen (einschließlich der Spacer und Clearfix-Klasse), und sie funktionieren nicht.

Danke!

Answer 1

Sie können nicht: sobald das Kind in der absoluten Position ist, ist es praktisch "außerhalb" des Elternteils (in der Erscheinung).

was Sie tun können, wenn Sie jquery aufgenommen haben, ist diese unelegant Hack verwenden:

$(".absolutepos").each(function() { 
    $(this).parent().css("height",$(this).height()); 
}); 

und die "absolutepos" Klasse hinzufügen, wenn die div in absoluten Position platzieren:

<div id="outer" style="position: relative;"> 
    <div id="inner absolutepos" style="position: absolute; height: 100px;"> 
     <p>This is the inner content.</p> 
    </div>    
</div> 

Answer 2

Sie können: durch etwas, was ich genannt "Dual parenting":

Bei einer ähnlichen Herausforderung habe ich ein äußeres relatives Objekt (die Floats erziehend) und ein absolut definiertes Feld mit den gleichen Dimensionen wie das relative Elternelement definiert, beginnend bei 0,0 des gemeinsamen (relativen) Elternteils: ein identisches Kopieren mit dem Vorteil, Objekte innerhalb zu platzieren, die in der Lage sind, die äußeren Grenzen des Floats zu ignorieren (ich brauchte es, um ein Objekt auf der Seite zu zentrieren, unabhängig von der Breite der dynamischen Floats.)

Die "Dual Elternschaft "zerquetscht beide Probleme:

1. der absolute Eltern konnte nicht die Höhe der Schwimmer (aber die Höhe der gegenseitigen Elternteil, die in der Lage war, die Schwimmer anzupassen).
2. Das relative Parent konnte ein Objekt nicht zentriert auf der Seite positionieren (es würde nur die Mitte zwischen den Floats finden und den zentrierten Inhalt daran hindern, die Grenzen der schwebenden Objekte zu kreuzen).

Ich habe eine fiddle (contains documentation) demonstriert, wie diese Einrichtung quetscht und quetscht, während immer noch die zentrierte Box. Die Grundidee ist in dem unten stehenden Code beschrieben:

html (auf einer Seite Anmerkung: die Reihenfolge der divs (links-Mitte-rechts, Mitte-rechts-links, ...) spielt keine Rolle.)

<header> 
    <div class="header-left">left</div> 
    <div class="header-center"> 
     <div class="centerinner">middle</div> 
    </div> 
    <div class="header-right">right</div> 
</header> 

css

header { 
    position:relative; /* shrinkwrap to contained floats */ 
    /* display: block /* no need to state this here */ 
    width: 100%; 
    margin:0; 
    padding:0; 
    vertical-align: top; 
    /* background-color: papayawhip; /* Debug */ 
} 
.header-left { /* top left of header. header adapts to height */ 
    float:left; 
    display:block; 
    /* width and padding as desired */ 
} 
.header-center { /* absolute reference for container box */ 
    position:absolute; 
    left: 0; 
    width: 100%; 
    height:100%; 
    /* background-color: gainsboro; /* Debug */ 
} 
.centerinner { /* centered within absolute reference */ 
    margin-left:45%; 
    margin-right:45%; 
    padding-left: 1ex; 
    padding-right: 1ex; 
    background-color: #D6A9C9; 
    width: -moz-fit-content; 
    width: -webkit-fit-content; 
    width: fit-content; 
    height:100%; 
} 
.header-right { 
    float:right; 
    text-align: right; 
    padding-left: 1ex; 
    color: forestgreen; 
/* background-color: #D6F2C3; /* Debug */ 
}