Przewiń część zawartości w kontenerze o ustalonej pozycji

Question

Mam element div position: fixed w układzie, jako pasek boczny. Zostałem poproszony o pozostawienie części zawartości na górze (wewnętrznie), a resztę do przewinięcia , jeśli przepełni ona spód div.

Spojrzałem na this answer, jednak przedstawione tam rozwiązanie nie działa z kontenerami position: fixed lub position: absolute, co jest uciążliwe.

Zrobiłem demonstrację JSFiddle mojego problemu here. Duża ilość tekstu powinna idealnie przewijać, a nie przepełniać na dole strony. Wysokość nagłówka może się różnić w zależności od treści i może być animowana.

JSFiddle przykładowy kod:

CSS:

div.sidebar { 
    padding: 10px; 
    border: 1px solid #ccc; 
    background: #fff; 
    position: fixed; 
    top: 10px; 
    left: 10px; 
    bottom: 10px; 
    width: 280px; 
} 

div#fixed { 
    background: #76a7dc; 
    padding-bottom: 10px; 
    color: #fff; 
} 

div#scrollable { 
    overlow-y: scroll; 
} 

HTML:

<div class="sidebar"> 
    <div id="fixed"> 
     Fixed content here, can be of varying height using jQuery $.animate()   
    </div> 

    <div id="scrollable"> 
     Potentially long content 
    </div> 
</div>​ 

Bez stałej nagłówku, mogę po prostu dodać overflow-y: scroll do div.sidebar i mogę szczęśliwie przewijać całą jego zawartość jeśli przepełni dno pojemnika. Występują jednak problemy z posiadaniem stałego nagłówka o zmiennej wysokości u góry paska bocznego i posiadającego dowolną zawartość pod tym zwinięciem, jeśli jest zbyt długi, aby zmieścił się w kontenerze.

div.sidebarkoniecznością pobyt position: fixed, a ja bardzo chciałbym to zrobić bez żadnych hacków, jak zrobić to jak krzyż przeglądarki, jak to możliwe. Próbowałem różnych rzeczy, ale żaden z nich nie działa i nie jestem pewien, co tu wypróbować.

Jak utworzyć element div wewnątrz kontenera position: fixed przewijać tylko w kierunku Y, gdy zawartość przepełnia zawartość elementu div zawierającego stały nagłówek o zmiennej, nieokreślonej wysokości? Bardzo chciałbym trzymać się z dala od JS, ale jeśli będę musiał to wykorzystać, to zrobię.

Answer 1

wydaje się działać, jeśli używasz

div#scrollable { 
    overflow-y: scroll; 
    height: 100%; 
} 

i dodać padding-bottom: 60px do div.sidebar.

Na przykład: http://jsfiddle.net/AKL35/6/

Jednak jestem pewien, dlaczego to musi być 60px.

Również przegapiłeś f z overflow-y: scroll;

Answer 2

Ustaw przewijany div, aby mieć max-size i dodać overflow-y: scroll; do jego właściwości.

Edytuj: próbuje uruchomić jsfiddle, ale nie przewija się prawidłowo. To zajmie trochę czasu, aby się dowiedzieć.

Answer 3

Zmieniłem przewijalną div być z pozycji absolutnej, i wszystko działa na mnie

div.sidebar { 
    overflow: hidden; 
    background-color: green; 
    padding: 5px; 
    position: fixed; 
    right: 20px; 
    width: 40%; 
    top: 30px; 
    padding: 20px; 
    bottom: 30%; 
} 
div#fixed { 
    background: #76a7dc; 
    color: #fff; 
    height: 30px; 
} 

div#scrollable { 
    overflow-y: scroll; 
    background: lightblue; 

    position: absolute; 
    top:55px; 
    left:20px; 
    right:20px; 
    bottom:10px; 
} 

DEMO with two scrollable divs

Answer 4

Właściwie to jest lepszy sposób to zrobić że. Jeśli height: 100% służy zawartość gaśnie granicy, ale gdy jest 95% wszystko jest w porządku:

div#scrollable { 
    overflow-y: scroll; 
    height: 95%; 
}