Come impedire ai genitori di elementi posizionati in modo assoluto di collassare

Question

Come posso impedire al genitore di un elemento posizionato in modo assoluto di comprimere?

Nel seguente codice, l'altezza del div esterno è 0:

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

Questo è molto simile a questa domanda, How do you keep parents of floated elements from collapsing?, che si occupa di elementi mobili, tuttavia ho provato alcune delle soluzioni (incluso il distanziatore e la classe di clearfix) e non funzionano.

Grazie!

Answer 1

Non è possibile: una volta che il bambino è in posizione assoluta, è praticamente "esterno" del genitore (in apparenza).

cosa si può fare, se hai inserito jQuery, è usare questo hack unelegant:

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

e aggiungere il "absolutepos" di classe quando si posiziona il div in posizione assoluta:

<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

È possibile: da qualcosa che ho soprannominato "bigenitorialità":

In una sfida simile, ho finito per definire un oggetto relativo esterno, (parenting i float), e una casella assolutamente definita delle stesse dimensioni del genitore relativo, a partire da 0,0 del genitore condiviso (relativo): un identico copia con il vantaggio di permettere di posizionare oggetti all'interno che sono in grado di ignorare i limiti esterni del float (ne avevo bisogno per centrare un oggetto sulla pagina, indipendentemente dalla larghezza dei galleggianti dinamici.)

Il "doppio" genitorialità "ha schiacciato entrambi i problemi:

1. il genitore assoluto non ha potuto ottenere l'altezza dei galleggianti (ma l'altezza del genitore reciproco che era in grado di adattarsi ai galleggianti).
2. il genitore relativo non è in grado di posizionare un oggetto centrato sulla pagina (trova solo il centro tra i float e mantiene il contenuto centrato dall'attraversare i bordi degli oggetti mobili).

Ho fatto un fiddle (contains documentation) dimostrando come questa configurazione schiaccia e schiaccia mantenendo la casella centrata. L'idea di base è delineato nel seguente codice:

html (su una nota a margine: l'ordine dei div (sinistra-centro-destra, di centro-destra-sinistra, ...) è irrilevante.)

<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 */ 
}