Erzwingen vertikaler Scrollbalken
Redaktionelle Einordnung
Diese archivierte Diskussion behandelt Erzwingen vertikaler Scrollbalken aus Sicht der Rubrik HTML5 & CSS.
Die Diskussion bleibt als Archiv nutzbar. Für die aktuelle Bewertung empfehlen sich ergänzend neuere Artikel, Tools oder eine konkrete Analyse.
Sinnvoll nutzbar bleibt der Thread vor allem als historischer Kontext, für typische Fragestellungen und zur Einordnung älterer Empfehlungen.
Einige im historischen Thread genannte Tools, Dienste oder externe Links könnten heute nicht mehr verfügbar oder inhaltlich überholt sein. Nutzen Sie sie bitte nur mit zusätzlicher Prüfung.
Startbeitrag
Archivierter Thread aus dem Seitenreport-Forum.
Mit "body { overflow-y:scroll; }" verhindere ich, dass das Layout seitlich hin und her springt wenn sich die Länge der Seite ändert.
Da es sich um eine CSS3-Anweisung handelt, muss ich wohl den Fehler im CSS-Validator
"Die Eigenschaft overflow-y existiert nicht in CSS level 2.1, aber in : scroll scroll"
in Kauf nehmen. Das geringere bel also.
Oder gibt es eine valide Lösung?
Antworten
10 BeiträgeIch blende das Ding einfach immer ein. Einen anderen Weg kenne ich nicht.
body,html {
margin-bottom:1px; /* Anzeige der Scrollbar */
}
FoolMoon schrieb:
Ich blende das Ding einfach immer ein. Einen anderen Weg kenne ich nicht.
body,html {
margin-bottom:1px; /* Anzeige der Scrollbar */
}
Hallo Paul,
das margin-bottom hat leider keinen Effekt bei meiner Seite.
Der Scrollbalken verschwindet bei kürzeren Seiten.
Grüße
Lutz
Hallo,
hm, also evtl. kannst du versuchen, dass du die gesamte Seite in einem DIV-Container packst.
hast du ja eh schon. Wenn du hier dem
eine breite von 1000px gibst und den Inhalt zentriert ausrichtest, zzgl. den Div-Container links ausrichtest, kannst du das Springen evtl. Verhindern und du bräuchtest das overflow-y: scroll; nicht. Bei Bedarf des Scrollbalkens schaltet er sich ein aber die Seite springt nicht mehr.
Ob das die sauberste Lösung ist, kann ich nicht beurteilen aber ich denke, zumindest wäre vielleicht eine korrekte Validation möglich. Also vielleicht ist es ein versuch Wert und ist meinerseits nur eine Idee und sogar eine Lösung.
Viele Grüße,
lwulfe schrieb:
FoolMoon schrieb:
Ich blende das Ding einfach immer ein. Einen anderen Weg kenne ich nicht.
body,html {
margin-bottom:1px; /* Anzeige der Scrollbar */
}
Hallo Paul,
das margin-bottom hat leider keinen Effekt bei meiner Seite.
Der Scrollbalken verschwindet bei kürzeren Seiten.
Grüße
Lutz
Hallo Lutz,
versuch mal das:
html { height: 100%; margin-bottom: 1px; overflow-y:scroll;}
Gruß Joachim
Bazzel schrieb:
html { height: 100%; margin-bottom: 1px; overflow-y:scroll;}
Gruß Joachim
Leider auch nicht valide.
hansen
Nepal Rundreisen
Gerade das overflow-y will er doch vermeiden.
Ich meine, beim YAML-Framework hätte es früher einen anderen Workaround gegeben, auch irgendetwas in RIchtung margin, aber genau weiß ich das leider nicht mehr.
Ist die Validität denn so wichtig? Es wird schließlich von allen gängigen Browsern unterstützt ...
UFOMelkor schrieb:
Gerade das overflow-y will er doch vermeiden.
Ich meine, beim YAML-Framework hätte es früher einen anderen Workaround gegeben, auch irgendetwas in RIchtung margin, aber genau weiß ich das leider nicht mehr.
Ist die Validität denn so wichtig? Es wird schließlich von allen gängigen Browsern unterstützt ...
Habe ich ja geschrieben. Der Versto gegen die Validitt ist das geringere bel.
Den Tipp mit overflow-y habe ich übrigens aus YAML. Kommentar dazu:
"Hinweis: Achten Sie beim Validieren Ihrer Stylesheets darauf, dass die Eigenschaft overflow-y offiziell erst mit dem CSS 3 Standard eingeführt wird und somit bei Validierung nach CSS 2 einen Fehler erzeugen wird, den Sie jedoch ignorieren können."
Ich würde natürlich lieber eine Alternative nutzen, wenn es eine gibt ...
Ich hab mich mal ein wenig im YAML-Forum schlaugemacht, die overflow-y Lösung ist ja auch da relativ neu.
Die vorher beste Lösung war anscheinend
[css]html {height: 100.3%; margin-bottom: 1px;}[/css]
Könnte aber bei neueren Browsern Problemen schaffen.
Die vorherige Lösung
[css]html {height: 100%; margin-bottom: 1px;}[/css]
scheint bei Safari 4 und Firefox 3.5 Probleme gemacht zu haben.
Ich würde dir im Hinblick auf die Zukunft zur overflow-y raten.
Hallo Lutz,
versuch mal diesen:
body {...
height: 100.01%;
}
Gruß Matthias