CSS: posizionare il parent genitore relativo all'altezza del bambino posizionato in posizione assoluta

Question

Sto cercando di creare una presentazione semplice. Finora, il markup di base è simile al seguente:

<h1>My Slideshow</h1> 

<p>This paragraph behaves as expected.</p> 

<div class="slide-container"> 
    <div class="slide"> 
    <h2>First Slide</h2> 
    <p>Some stuff on this slide…</p> 
    </div> 

    <div class="slide"> 
    <h2>Second Slide</h2> 
    <p>And some more stuff here…</p> 
    </div> 
</div> 

<p>This paragraph will disappear beneath the stacked images.</p> 

Questo è il CSS corrispondente:

.slide-container { 
    position: relative; 
} 

.slide { 
    position: absolute; 
    top: 0; 

    /* just for the looks */ 
    width: 20em; 
    padding: 0 1em; 
    border: 1px solid steelblue; 
    background: white; 
} 

Il problema è, che la .slide-container non si adatta all'altezza del suo bambino (o bambini) .slide (vedi screenshot).

so di poter regolare l'altezza del .slide-container manualmente, ma voglio mettere questo in una griglia di fluido, in cui l'altezza è variabile. C'è un modo per raggiungere questo obiettivo?

Answer 1

Gli articoli posizionati in modo assoluto sono associati logicamente al genitore ma non "fisicamente". Non fanno parte del layout, quindi l'elemento padre non può davvero vedere quanto sono grandi. È necessario codificare la dimensione da soli o annusarla con JavaScript e impostarla in fase di esecuzione.

Answer 2

È possibile utilizzare questo utilizzando jQuery:

function sliderheight(){ 
     divHeight = $('.slide').height(); 
     $('.slide-container').css({'height' : divHeight}); 
    } 
    sliderheight(); 

Ciò ridimensionerà il div 'slide-contenitore' per avere la stessa altezza del div 'slide'.

Si può rendere sensibile chiamando la funzione sul lancio di un evento di 'ridimensionamento':

$(window).resize(sliderheight); 

Spero che questo aiuti.

Answer 3

Il modo perfetto per fare ciò è impostare le dimensioni del genitore relativo, ovvero la larghezza & per adattarsi ai bambini assoluti.

http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

Questo ragazzo ha scritto abbastanza per capire le basi del posizionamento CSS. In realtà il genitore relativo viene utilizzato per posizionare logicamente tutto il figlio assoluto. Ma non condivide la posizione fisica di conseguenza non si estende per coprire i bambini relativi.