it-swarm.com.de

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

Ich habe eigentlich zwei Probleme, aber lassen Sie uns das Hauptproblem zuerst 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 eine Standard-Div, die einen korrekten Bildlauf durchführt. Das Problem ist, dass, wenn der Browser-Ansichts-Port zu klein ist, um das gesamte Menü zu sehen, es keine Möglichkeit gibt, es zum Scrollen zu bringen, die ich finden kann (zumindest nicht mit CSS). Ich habe versucht, verschiedene Überläufe in CSS zu verwenden, aber nichts bringt das div zum Scrollen. Das Div, das das Menü enthält, ist auf min-height: 100% und position: fixed gesetzt. Beide Attribute muss ich beibehalten.

Das Div mit dem Menü befindet sich in einem anderen Wrapper-Div, das absolut positioniert und auf 100% gesetzt ist.

Wie kann ich einen vertikalen Bildlauf durchführen, wenn der Inhalt für die div zu groß ist?

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

Irgendwelche Lösungen? Vielleicht wird Javascript benötigt? (wovon 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 zu erhöhen: 100%, um zu sehen, ob das ein Problem ist, aber es hat weder funktioniert noch eine feste Höhe, wie z. B. 600px.

130
TCD Factory

Das Problem mit der Verwendung von height: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 angezeigten Problem, da der nicht fixierte Inhalt lang genug ist, um den fixierten Inhalt mit 100% Höhe aufzunehmen, ohne dass eine Bildlaufleiste erforderlich ist. Der Browser weiß/kümmert sich nicht darum, dass Sie diese Leiste nicht nach unten scrollen können, um sie anzuzeigen

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

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

Diese Gabel Ihrer Geige zeigt meine Verlegenheit: http://jsfiddle.net/strider820/84AsW/1/

217
strider820

Hier sind beide Korrekturen.

Zunächst müssen Sie der festen Seitenleiste eine Höhe zuweisen, 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 der 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 der Bildlauf nicht angezeigt werden muss.

Prost, Ignacio

4
ignacioricci

Im Allgemeinen sollte ein fester Abschnitt mit den Eigenschaften width, height und top, bottom festgelegt werden, da er sonst seine Größe und Position nicht erkennt.

Wenn die verwendete Box direkt untergeordnet für body ist und Nachbarn hat, ist es sinnvoll, die Eigenschaften z-index Und top, left Zu überprüfen, da sie sich überlappen können, was sich auf den Mauszeiger beim Scrollen auswirken kann Inhalt.

Hier ist die Lösung für ein Inhaltsfeld (ein direktes untergeordnetes Element von body tag), das häufig 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 niemandem. Danke!

0
Lefan

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

Die Antwort von @ strider82 wie folgt wird die Magie auslösen:

.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 diese Kommentar wo @ Zug erklärt mit overflow:auto Über overflow:scroll.

0
Siddhesh T