Haben Sie eine feste Position div, die scrollen muss, wenn Inhalt überläuft

Question

Ich habe eigentlich zwei Probleme, aber lassen Sie das primäre Problem zuerst lösen, da ich glaube, dass der andere ist einfacher zu adressieren.

Ich habe eine feste Position div auf der linken Seite der Bildlauf für ein Menü. Die rechte Seite ist ein Standard-Div, das richtig scrollt. Das Problem ist, dass, wenn der Browser-View-Port zu klein ist, um das gesamte Menü zu sehen .. es gibt keine Möglichkeit, es zu scrollen, die ich finden kann (zumindest nicht mit CSS). Ich habe versucht, verschiedene Überläufe in CSS zu verwenden, aber nichts macht das div Scroll. Das div, das das Menü enthält, wird auf min-height: 100% und position: fixed gesetzt. Beide Attribute müssen beibehalten werden.

Das div, das das Menü enthält, befindet sich in einem anderen Wrapperdiv, das absolut positioniert ist und die Höhe auf 100% festgelegt ist.

Wie kann ich es vertikal scrollen, wenn der Inhalt für das Div zu hoch ist?

Das führt mich zu dem anderen Problem, dass ich nicht eine Bildlaufleiste anzeigen möchte .. aber ich denke, ich habe vielleicht schon eine Antwort darauf (nur funktioniert es noch nicht, weil ich nicht bekommen kann das div zum scrollen um mit zu beginnen).

Irgendwelche Lösungen? Vielleicht wird Javascript benötigt? (Von denen ich weiß wenig über)

JS Fiddle Example

und der entsprechende Code, der das Problem verursacht (da hier die ganze Sache Posting ist waaay zu lang):

.fixed-content { 
    min-height:100%; 
    position:fixed; 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 

Auch versucht das Hinzufügen Höhe: 100% auch nur um zu sehen, ob das ein Problem war, aber es hat auch nicht funktioniert ... noch hatte eine feste Höhe, wie 600px.

Answer 1

Ich weiß, dass dies eine alte Frage, aber ich dachte, dass ich nur da draußen diese Antwort werfen würde.

Das Problem mit Höhe: 100% ist, dass es 100% der Seite statt 100% des Fensters sein wird (wie Sie es wahrscheinlich erwarten würden). Dies führt zu dem Problem, das Sie sehen, da der nicht fixierte Inhalt lang genug ist, um den festen Inhalt mit 100% Höhe zu enthalten, ohne dass eine Bildlaufleiste erforderlich ist.Der Browser weiß nicht/kümmert sich, dass Sie nicht scrollen können, um es zu sehen

Da jedoch behoben hat die Eigenschaften, die es tut, können Sie dies stattdessen tun, und erreichen, was Sie versuchen tun:

.fixed-content { 
    top: 0; 
    bottom:0; 
    position:fixed; 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 

Hier eine Gabel Ihrer jsfiddle ist mein fix Arbeits zeigen: http://jsfiddle.net/strider820/84AsW/1/

Answer 2

Hier sind beide Fixes.

Zuerst in Bezug auf die festen Seitenleiste, müssen Sie es mit einer Höhe geben, für sie ersäufen

HTML-Code:

<div id="sidebar">Menu</div> 
<div id="content">Text</div> 

CSS-Code:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;} 
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;} 
#content {width:80%; padding-left:20%;} 

@media screen and (max-height:200px){ 
    #sidebar {color:blue; font-size:50%;} 
} 

anschauliches Beispiel:

Es ist unmöglich nicht um eine Bildlaufleiste zu erhalten, wenn Ihr Inhalt die Höhe des div übersteigt. Deshalb habe ich eine Medienabfrage für die Bildschirmhöhe hinzugefügt. Vielleicht können Sie Ihre Stile für kurze Bildschirmgrößen anpassen, so dass die Bildlaufleiste nicht angezeigt werden muss.

Cheers, Ignacio