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?
Ich 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,
Absolut unprofessionell und unschön, aber 100% valide:
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
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 Validität 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
Beitrag erstellen
EinloggenKostenlos registrieren