Il child div posizionato in modo assoluto si espande per adattarsi al genitore?

Question

Esiste comunque un bambino posizionato in posizione assoluta da espandere per riempire il relativo genitore posizionato in posizione? (L'altezza del genitore non è fissa) Ecco cosa ho fatto e funziona perfettamente con Firefox e IE7 ma non con IE6. :(

<div id="parent"> 
    <div id="child1"></div> 
</div> 

#parent { position: relative; width: 200px; height:100%; background:red } 
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue } 

Answer 1

Se non ricordo male c'è un bug con il modo in IE6 gestisce altezza div. Si creerà solo il div all'altezza necessaria per contenere il contenuto al suo interno quando l'altezza è impostato su 100%. Vorrei raccomandare due approcci:

1. non preoccupatevi di sostenere IE6 in quanto è un browser morto comunque
2. Se questo non funziona, usare qualcosa come jQuery per ottenere l'altezza del div genitore e quindi impostare la div bambino a quell'altezza
3. falso impostando il backgro unds deve essere dello stesso colore quindi nessuno nota la differenza

Answer 2

È possibile ottenere questo con l'impostazione degli attributi superiore e inferiore del bambino.

See how this is done

In fondo a questo articolo, v'è un collegamento a Dean Edwards' IE7 (e IE8) libreria js che si dovrebbe includere per i visitatori di IE6. È una libreria JS che in realtà rende IE6 un comportamento come IE7 (o 8) quando lo si include. Dolce!

Dean Edwars' IE7 and 8 JS libraries

Answer 3

Per quanto ne so, non c'è modo di espandere un elemento padre attorno a un elemento figlio posizionato in modo assoluto. Rendendo l'elemento figlio assolutamente posizionato lo stai rimuovendo dal flusso regolare degli elementi della pagina.

Di recente ho creato un sito Web a due colonne in cui la colonna di destra era posizionata in modo assoluto ma la colonna di sinistra non lo era. Se la colonna di sinistra avesse meno contenuto e un'altezza minore rispetto alla colonna di destra, la pagina avrebbe tagliato la colonna a destra poiché era posizionata in modo assoluto.

Per risolvere questo problema, ho dovuto determinare se l'altezza della colonna destra fosse maggiore dell'altezza della colonna sinistra e, in tal caso, impostare l'altezza dell'altezza div superiore al maggiore dei due.

Ecco la mia soluzione jQuery. Non sono un gran programmatore, quindi sentitevi liberi di modificare questo:

jQuery(function(){ 

    var rightColHeight = jQuery('div.right_column').height(); 
    var leftColHeight = jQuery('div.left_column').height(); 

    if (rightColHeight > leftColHeight){ 
    jQuery('.content_wrap').height(rightColHeight+'px'); 
} 
}); 

Answer 4

È facile. Il trucco sta tramontando top: 0px e bottom: 0px allo stesso tempo

Ecco il codice di lavoro

html, body { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

#parent { 
    display: block; 
    background-color: #ff0; 
    border: 1px solid #f00; 
    position: relative; 
    width: 200px; 
    height: 100%; 
} 
#child1 { 
    background-color: #f00; 
    display: block; 
    border: 1px solid #ff0; 
    position: absolute; 
    left: 200px; 
    top: 0px; 
    bottom: 0px; 
} 

Partenza un esempio di lavoro qui http://jsfiddle.net/Qexhh/