altezza bambino di essere al 100% dell'altezza di contenuto padre scorrevole

Question

perche questo violino: http://jsfiddle.net/eKJAj/

Sto cercando di avere un div assoluta posizionato (linea rossa) a prendere l'intera altezza della altezza totale della sua genitore (giallo); non solo l'altezza visibile del genitore.

Se provate il violino vedrete che la barra rossa non va giù per intero quando si scorre il div giallo. Inoltre, non può essere più grande del suo genitore se vengono rimosse alcune sezioni blu.

html:

<div class="parent"> 
    <div class="bar"></div> 
    <div class="section"></div> 
    <div class="section2"></div> 
    <div class="section2"></div> 
    <div class="section2"></div> 
    <div class="section2"></div> 
    <div class="section2"></div> 
    <div class="section"></div> 
</div> 

<input type="button" value="hide" onclick="$('.section2').slideUp(400)" /> 
<input type="button" value="show" onclick="$('.section2').slideDown(400)" /> 

css:

.parent{ 
    position:relative; 
    width:100%; max-height:300px; 
    background-color:yellow; 
    overflow-y:auto; 
} 

.bar{ 
    position:absolute; left:50px; 
    width:1px; height:100%; 
    background-color:red; 
} 

.section, .section2{ 
    width:100%; height:70px; 
    margin-bottom:3px; 
    background-color:blue; 
} 

ho cercato alcune opzioni per la barra blu come top:0px; botom:0px o position:relative; margin-left:50px e anche fatto un tentativi con galleggiante la linea rossa, a inutile.

Se possibile preferisco tenerlo solo CSS. Qualche suggerimento molto apprezzato !!

Answer 1

Una soluzione è quella di avvolgere il tuo .parent in un contenitore (diverso).

JSFiddle.

Impostare il vostro contenitore .parent s' di avere la max-height e overflow-y invece:

<div class="container"> 
    <!-- parent in here --> 
</div> 

.container { 
    max-height:300px; 
    overflow-y:auto; 
} 
.parent{ 
    position:relative; 
    width:100%; 
    background-color:yellow; 
} 

La ragione non sta funzionando nel tuo esempio è perché si sta impostando l'altezza massima di 300px. L'altezza 100% .bar assume quindi un'altezza di 300 px. Con questa soluzione alternativa, il divisore .parent non ha un limite di altezza di 300 px, ma invece lo esterno .container.