wysokość dziecka do 100% wysokości od przewijania dominującej zawartości

Question

Proszę rozważyć ten skrzypce: http://jsfiddle.net/eKJAj/

Staram się mieć absolutną umieszczony div (czerwona linia), aby wykonać całą wysokość całkowita wysokość jego (żółty) rodzic; nie tylko widoczna wysokość rodzica.

Jeśli spróbujesz skrzypiec, zobaczysz, że czerwony pasek nie przesuwa się w dół podczas przewijania żółtego elementu div. Również nie może być większy niż jego rodzic, jeśli niektóre niebieskie sekcje zostaną usunięte.

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; 
} 

Próbowałam kilka opcji na niebieskim pasku, takich jak top:0px; botom:0px lub position:relative; margin-left:50px i nawet an próbami pływających czerwoną linię, aby bez skutku.

Jeśli to możliwe, wolę zachować tylko CSS. Każda wskazówka bardzo doceniona !!

Answer 1

Jednym z rozwiązań jest owinięcie twojego .parent w pojemnik (dodatkowy).

JSFiddle.

Ustaw .parent „s kontenerów mieć max-height i overflow-y Zamiast: jest

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

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

Powodem nie działa w swoim przykładzie, bo jesteś ustalania maksymalnej wysokości do rozmiar to 300. Wysokość 100% .bar przyjmuje wtedy wysokość 300 pikseli. Przy takim obejściu dzielnik .parent nie ma limitu wysokości 300 pikseli, ale zamiast niego działa zewnętrzna wersja .container.