Erzwingen vertikaler Scrollbalken

am 11.04.2010, 14:01 Uhr eröffnete lwulfe folgenden Thread
HTML5 & CSS 7151 mal gelesen 15 Antwort(en).

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?

FoolMoon
Content Meister (325 Beiträge)

am 11.04.2010, 16:36 Uhr schrieb FoolMoon

Ich blende das Ding einfach immer ein. Einen anderen Weg kenne ich nicht.

body,html {
margin-bottom:1px; /* Anzeige der Scrollbar */
}

Wirtschaftliche Bodenheizung in Verbindung mit einem Industrieboden vom Profi.

lwulfe
Avatar lwulfe

Consultant
Content Halbgott (743 Beiträge)

am 11.04.2010, 17:30 Uhr schrieb lwulfe

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

webdesignwww
Avatar webdesignwww

Kommunikationsdesigner
Fortgeschrittener (64 Beiträge)

am 11.04.2010, 18:22 Uhr schrieb webdesignwww

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,

Webdesign World Wide Web
Andreas Blomenhofer
Web: http://www.webdesign-www.de
Web-Blog: http://blog.webdesign-www.de

hansen
Foren Moderator
Content Gott (1886 Beiträge)

am 11.04.2010, 18:55 Uhr schrieb hansen

Absolut unprofessionell und unschön, aber 100% valide:

hansen

Nepal Rundreisen

Bazzel
Avatar Bazzel

Content Meister (251 Beiträge)

am 11.04.2010, 19:21 Uhr schrieb Bazzel

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

Rock'n'Roll Club Lörrach
Deutsche Meisterschaft 2009 Rock'n'Roll
Â Â Â

hansen
Foren Moderator
Content Gott (1886 Beiträge)

am 11.04.2010, 19:31 Uhr schrieb hansen

Bazzel schrieb:

html { height: 100%; margin-bottom: 1px; overflow-y:scroll;}

Gruß Joachim

Leider auch nicht valide.

hansen

Nepal Rundreisen

UFOMelkor
Avatar UFOMelkor

Student
Content Meister (350 Beiträge)

am 11.04.2010, 19:33 Uhr schrieb UFOMelkor

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 ...

Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community

lwulfe
Avatar lwulfe

Consultant
Content Halbgott (743 Beiträge)

am 11.04.2010, 19:49 Uhr schrieb lwulfe

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 ...

UFOMelkor
Avatar UFOMelkor

Student
Content Meister (350 Beiträge)

am 11.04.2010, 20:13 Uhr schrieb UFOMelkor

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.

Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community

masa8