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

Ich habe eigentlich zwei Probleme, aber lassen Sie uns zuerst das Hauptproblem lösen, da ich glaube, dass das andere leichter zu lösen ist.

Ich habe eine feste Position div auf der linken Seite der Schriftrolle für ein Menü. Die rechte Seite ist ein Standard-Div, der richtig scrollt. Das Problem ist, dass wenn der Browser-Ansichtsport zu klein ist, um das gesamte Menü zu sehen, es keine Möglichkeit gibt, ihn zum Scrollen zu bringen, den ich finden kann (zumindest nicht mit CSS). Ich habe versucht, verschiedene Überläufe in CSS zu verwenden, aber nichts lässt die Div scrollen. Das div, das das Menü enthält, ist auf min-height: 100% und position: fixed eingestellt. Beide Attribute muss ich behalten.

Das Div, das das Menü enthält, befindet sich in einem anderen Wrapper-Div, das absolut positioniert und die Höhe auf 100% eingestellt ist.

Wie kann ich es dazu bringen, vertikal zu scrollen, wenn der Inhalt für das div zu groß ist?

Das führt mich zu dem anderen Problem, dass ich nicht möchte, dass eine Bildlaufleiste angezeigt wird. Aber ich glaube, ich habe möglicherweise bereits eine Antwort darauf (nur funktioniert es noch nicht, weil ich das Div nicht zum Scrollen bringen kann zunächst).

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

JS Fiddle Beispiel

und der relevante Code, der das Problem verursacht (da das Posten des Ganzen hier zu lang ist):

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

Ich habe auch versucht, die Höhe hinzuzufügen: 100%, nur um zu sehen, ob dies ein Problem war, aber es hat auch nicht funktioniert ... und auch keine feste Höhe wie 600px.

Das Problem bei der Verwendung height:100%ist, dass es 100% der Seite anstelle von 100% des Fensters ist (wie Sie es wahrscheinlich erwarten würden). Dies führt zu dem angezeigten Problem, da der nicht festgelegte Inhalt lang genug ist, um den festen Inhalt mit 100% Höhe einzuschließen, ohne dass eine Bildlaufleiste erforderlich ist. Der Browser weiß nicht, dass Sie diese Leiste nicht nach unten scrollen können, um sie anzuzeigen

Sie können verwenden fixed, um das zu erreichen, was Sie versuchen zu tun.

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

Diese Gabel Ihrer Geige zeigt meinen Fix: http://jsfiddle.net/strider820/84AsW/1/

Hier sind beide Korrekturen.

In Bezug auf die feste Seitenleiste müssen Sie zunächst eine Höhe angeben, damit sie überläuft:

HTML Quelltext:

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

Live-Beispiel: http://jsfiddle.net/RWxGX/3/

Es ist unmöglich, KEINE Bildlaufleiste zu erhalten, wenn Ihr Inhalt die Höhe des Div überschreitet. Aus diesem Grund habe ich eine Medienabfrage für die Bildschirmhöhe hinzugefügt. Möglicherweise können Sie Ihre Stile für kurze Bildschirmgrößen anpassen, damit die Schriftrolle nicht angezeigt werden muss.

Prost, Ignacio

Im Allgemeinen fester Abschnitt sollte festgelegt werden width, heightund top,bottom Eigenschaften, sonst wird es nicht seine Größe und Position erkennen.

Wenn die verwendete Box direkt Kind für Körper und Nachbarn hat, dann macht es Sinn , zu überprüfen z-indexund top, leftEigenschaften, da sie einander überlappen können, die Sie mit der Maus schweben beeinflussen könnten , während der Inhalt scrollen.

Hier ist die Lösung für ein Inhaltsfeld (ein direktes untergeordnetes bodyElement des Tags), das üblicherweise zusammen mit der mobilen Navigation verwendet wird.

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

Hoffe es hilft jedem. Danke dir!

Die Lösungen hier haben bei mir nicht funktioniert, da ich Reaktionskomponenten gestalte.

Was jedoch für die Seitenleiste funktionierte, war

.sidebar{
position: sticky;
top: 0;
}

Hoffe das hilft jemandem.

Hinterlassen Sie eine Antwort für alle, die etwas Ähnliches tun möchten, aber in horizontaler Richtung, wie ich es wollte.

Das Optimieren der Antwort von @ strider820 wie unten wird die Magie bewirken :

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

Das ist es. Überprüfen Sie auch diesen Kommentar, in dem @train mit overflow:autoover erklärt wurde overflow:scroll.