Zmienna wysokość przewijania div, pozycjonowana względem zmiennej wysokości rodzeństwa

Question

Ostatnio zadałem to pytanie: overflow (scroll) - 100% container height o tym, jak uzyskać przewijany pionowo div z wysokością zmiennej.

bardzo pomocny użytkownik pod warunkiem rozwiązania z wykorzystaniem bezwzględnego pozycjonowania i wysokości: 100%, tutaj: http://jsfiddle.net/TUwej/2/. w tym skrzypce można zobaczyć podstawowe pożądane zachowanie - przewijany element div wypełni wysokość głównego kontenera, zgodnie z treścią elementu #main.

Zmodyfikowałem to nieco i używane górne: 0 dolne: 0 zamiast wysokości: 100%, aby pomieścić element nad przewijanym obszarem. zmodyfikowaną wersję można zobaczyć tutaj: http://jsfiddle.net/N6muv/3/ (zdaję sobie sprawę, że jest trochę dodatkowych znaczników i definicji klas, które są puste, i sąsiadujący kombinator rodzicielski, który wydaje się zbędny - są to pozostałości rzeczywistej struktury)

wszystko jest w porządku, z wyjątkiem tego, że musiałem podać stałą górną współrzędną dla przewijanego div (uwaga na górę: deklaracja 120px dla selektora ".sidebar-list"). chciałbym, aby było to w stosunku do elementu ".sidebar-options" powyżej, tak aby powyższy pojemnik opcji mógł mieć dowolną liczbę opcji, a przewijany element div ustawi się odpowiednio. przy użyciu stałych współrzędnych, jeśli jakiekolwiek opcje są dodawane lub usuwane, występuje nakładanie się lub powstaje niepotrzebne miejsce - chciałbym tego uniknąć. dokładna liczba opcji, które powinny pojawić się, zależy od widoków.

Myślałem, że zawijam przewijany element div we względnie umieszczonym kontenerze, ale powoduje to konflikt z dnem: 0 nie wskazuje już wysokości głównego kontenera ".wrapper" (co powinien zrobić). podobnie, używając height: 100% użyje obliczonej wysokości kontenera ".wrapper", więc przewijalny div przekroczy granicę ".wrapper".

Czy istnieje sposób na zachowanie funkcjonalności pokazanej w drugim skrzypku, ale z górną częścią przewijanego div względem dolnej części opcji div (która będzie miała zmienną wysokość)?

z góry dzięki za wszelkie sugestie.

EDYCJA: S.O. zapytałem, czy chcę rozpocząć nagrodę, więc zrobiłem (pierwszy raz) - mam nadzieję, że 100 punktów nie jest uważane za zbyt niskie. wciąż poszukuje rozwiązania nieskryptowanego, czystego css, które nie obejmuje stałych współrzędnych lub wymiarów dla osi y (szerokość i lewy przydział są w porządku). thx

Answer 1

UPDATE:

importu JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

New Demo: http://jsfiddle.net/Mutant_Tractor/N6muv/28/

Dodaj ten miły mały skrypt jQuery do strony:

var contentColHeight = $('.content').height(); 
var optionColHeight = $('.sidebar-options').height(); 
var newHeight = contentColHeight - optionColHeight; 
$('.sidebar-list').height(newHeight); 

---

OLD

Jak ten odpowiadał naszym potrzebom? http://jsfiddle.net/Mutant_Tractor/N6muv/4/

Zmieniłem position:absolute; do position:relative i dodaje statyczną height:190px jak również dodanie background:pink; (tak BG zawsze wygląda po prawej)

Można spróbować dodawania i usuwania opcji z powyższej listy do tego demo.

Pełny kod:

.sidebar-content { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background : pink; 
} 

Answer 2

wierzę należy usunąć pozycjonowanie bezwzględne na elementach wewnętrznych i spróbuj overflow: auto.

Answer 3

Musisz zdefiniować wysokość listy bocznej, aby ustawić zawartość do przewijania i zdefiniować minimalną lub maksymalną wysokość. I można ustawić .sidebar-list{position: relative;} Zobacz ten Fiddle

Edycja Twój .sidebar-content należy również stosunkowo umieszczony Zobacz ten Fiddle bez względu na treść „Opcje” zawiera.