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ß)
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.
quelle
Antworten:
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 anzuzeigenSie können verwenden
fixed
, um das zu erreichen, was Sie versuchen zu tun.Diese Gabel Ihrer Geige zeigt meinen Fix: http://jsfiddle.net/strider820/84AsW/1/
quelle
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:
CSS-Code:
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
quelle
Im Allgemeinen fester Abschnitt sollte festgelegt werden
width
,height
undtop
,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-index
undtop, left
Eigenschaften, 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
body
Element des Tags), das üblicherweise zusammen mit der mobilen Navigation verwendet wird.Hoffe es hilft jedem. Danke dir!
quelle
Die Lösungen hier haben bei mir nicht funktioniert, da ich Reaktionskomponenten gestalte.
Was jedoch für die Seitenleiste funktionierte, war
Hoffe das hilft jemandem.
quelle
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 :
Das ist es. Überprüfen Sie auch diesen Kommentar, in dem @train mit
overflow:auto
over erklärt wurdeoverflow:scroll
.quelle