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

150

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.

TCD-Fabrik
quelle
Bitte poste eine jsfiddle mit dem HTML und CSS, die du gerade verwendest, damit wir das Problem sehen können. Vielen Dank!
mchail
3
Haben Sie versucht, Überlauf: Auto; ?
Dan
Ja Überlauf: Auto oder Überlauf-y: Bildlauf oder Überlauf: Bildlauf Alle lassen das feste Div nicht scrollen.
TCD Factory
Der Grund für das Scrollen ist, wenn ein Div zu viel Inhalt in seinen definierten Längen hat. Wenn der Browser-Ansichtsport verkleinert wird, würde das div ohnehin keine Bildlaufaktion erzwingen.
Dan
JSfiddle und HTML / CSS können nicht veröffentlicht werden, da sie einfach zu lang sind und Sie keinen JSfiddle-Link ohne Code veröffentlichen können. :( Ich habe nur den Code gepostet, der dem Div-Scrollen nicht zu helfen scheint. Und den Link zu der ganzen Sache.
TCD Factory

Antworten:

244

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/

strider820
quelle
Hat funktioniert. Ich brauchte dies für eine Adaption eines Codrops-Artikels. Einige müssen möglicherweise auch links und rechts auf 0 setzen. Vielen Dank, Glück
Santiago Baigorria
19
Wenn Sie "overflow-y" auf "auto" setzen, wird die Bildlaufleiste ausgeblendet, wenn sich der Inhalt im Ansichtsfenster befindet. Mit anderen Worten, wenn es nicht überläuft, gibt es keine Bildlaufleiste und wenn es überläuft, gibt es eine Bildlaufleiste.
Zug
Richtig. Ich habe nur sein CSS benutzt und repariert, was wirklich kaputt war. Er schien jedoch bereits die Antwort auf dieses Problem in seiner Frage zu haben.
strider820
3
hat funktioniert! tolle Lösung. Ich verstehe immer noch nicht den Boden: 0 Teil .. könntest du bitte erklären?
Gianluca Ghettini
5
Das Hinzufügen von oben: 0 und unten: 0, während die Höhe in einem positionfesten Element
weggelassen wird,
6

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

ignacioricci
quelle
Siehe das von mir veröffentlichte JSFiddle-Beispiel. Sie werden das Problem sehen.
TCD Factory
Dies funktioniert nicht in älteren Browsern, wie Mobile Safari für iOS 4.2
mheavers
4

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!

Lefan
quelle
3

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.

Adebola
quelle
Ich habe CSS jahrelang bearbeitet und hatte keine Ahnung von dem Attribut "Sticky Position". Danke dafür, hat auch für meine Implementierung perfekt funktioniert!
1owk3y
0

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.

Siddhesh T.
quelle