Scroll Teil des Inhalts in festen Position Container

Question

Ich habe eine position: fixed div in einem Layout, als Sidebar. Ich wurde gebeten, einen Teil davon inhaltlich fixiert zu haben (intern), und den Rest zu scrollen , wenn es den Boden des div überläuft.

Ich habe mir this answer angesehen, aber die dort vorgestellte Lösung funktioniert nicht mit position: fixed oder position: absolute Containern, was ein Schmerz ist.

Ich habe eine JSFiddle Demonstration meines Problems here gemacht. Die große Menge an Text sollte im Idealfall scrollen, anstatt in den unteren Rand der Seite überlaufen. Die Höhe der Kopfzeile kann je nach Inhalt variieren und animiert sein.

JSFiddle Beispielcode:

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>​ 

Ohne einen festen Header, kann ich einfach hinzufügen overflow-y: scroll zu div.sidebar und ich kann all seinen Inhalt glücklich blättern wenn es den Boden des Containers überläuft. Ich stoße jedoch auf Probleme mit einem festen Kopf mit variabler Höhe oben in der Seitenleiste und mit Inhalten unter dem Bildlauf, wenn es zu lang ist, um in den Container zu passen.

div.sidebarMuss Aufenthalt position: fixed, und ich mag sehr viel dies ohne Hacks zu tun, sowie es als Cross-Browser wie möglich zu machen. Ich habe verschiedene Dinge versucht, aber keiner von ihnen funktioniert, und ich bin unsicher, was ich von hier aus versuchen soll.

Wie kann ich ein div innerhalb eines position: fixed Containers nur in Y-Richtung scrollen, wenn der Inhalt den enthaltenen div überläuft, mit einem festen Header von unterschiedlicher, unbestimmter Höhe? Ich würde sehr gerne von JS fern bleiben, aber wenn ich es benutzen muss, werde ich es tun.

Answer 1

Es scheint, wenn Sie

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

und fügen padding-bottom: 60px-div.sidebar verwenden zu arbeiten.

Zum Beispiel: http://jsfiddle.net/AKL35/6/

aber ich bin nicht sicher, warum es 60px sein muss.

Auch vermisst man die f von overflow-y: scroll;

Answer 2

Legen Sie das scrollbare div auf max-size fest und fügen Sie overflow-y: scroll; zu seinen Eigenschaften hinzu.

Edit: versuchen, die jsfiddle zur Arbeit zu bringen, aber es scrollt nicht richtig. Dies wird einige Zeit brauchen, um es herauszufinden.

Answer 3

I scrollbaren div mit absoluter Position geändert werden, und alles funktioniert für mich

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

Eigentlich ist diese bessere Weg ist zu tun Das. Wenn height: 100% verwendet wird, geht der Inhalt an der Grenze, aber wenn es 95% alles in Ordnung ist:

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