Scrollbars auf Webseiten erzwingen
Ich erstelle gerade für die Fahrschule von den Eltern eines Freundes eine neue Webseite und bin dabei auf folgendes “Problem” gestoßen. Ich verwende hier und da einen Akkordeon-Effekt, der von den MooTools bereit gestellt wird. Hierbei kann man immer bestimmte Bereiche einer Webseite wie bei einem Akkordeon auf- und zuklappen. Den Effekt kann man zum Beispiel auf der Launchy-Webseite anschauen.
Nun habe ich aber folgende optische Unschönheit: wenn der Content beim Aufklappen länger wird als die Seite, dann ruckt das ganze Bild einmal nach Links, wenn sich die Scrollbars aktivieren, bzw. nach rechts, wenn der Inhalt wieder zugeklappt wird und die Webseite wieder vollständig vertikal in das Browserfenster passt und sich die Scrollbars wieder ausblenden.
Deshalb habe ich danach gesucht, wie man die Scrollbars immer anzeigen kann. Dazu behilft man sich mit einem simplen CSS-Trick. Es existieren zwar für dieses Szenario Browser-abhängige CSS-Markups, aber diese sind nicht standard-valide und man kann nicht davon ausgehen, dass das Markup in allen Browsern läuft.
Die Lösung ist folgende: man sagt dem Browser, dass der HTML-Inhalt etwas größer als 100% ist:
html {
height: 101%;
}
Ich habe das Ganze nur einmal kurz mit Firefox 3.6.3 und im Internet Explorer 8 getestet. Funktioniert bei beiden prima. Zwar kann der Benutzer nun auf jeder Seite um ein paar Pixel scrollen, das nehme ich aber lieber in Kauf, als das die Seite immer hin- und herspringt 
9 Kommentare
Ich habe diesen Befehl standardmäßig in allen meinen CSS drinne. Meiner Meinung nach gilt das aber vor allem für den Firefox, so dass der Scrollbalken rechts immer da, also erzwungen ist. Kann natürlich mittlerweile auch für den IE8 so gelten
Diesbezüglich finde ich auch diesen Befehl interessant:
* { margin: 0; padding: 0; }Somit werden zumindest schon mal einige IE6 und IE7 Darstellungsprobleme behoben, wobei es aber trotzdem hin und wieder noch Hacks braucht
@Tanja: Das sind Browser-abhängige Voreinstellungen. Dazu habe ich auch schon was veröffentlicht. Suche mal nach Reset-Stylesheet.
*lacht* nö, muss ich nicht suchen, ich kenne die alle in und auswendig. Verdiene schließlich mein täglich Brot mit solchen Dingen
Ach machste hauptberuflich Webdesign? Ich dachte was in Richtung Ernährung
Ich habe meine Selbständigkeit etwas aufgeteilt: Eigener Online Shop, mehrere Blogs, Webdesign & Webprogrammierung als Dienstleistung (z.B. auch für die ein oder andere Agentur). Praktisch von allem ein bißchen was. Dem Bereich Online Marketing widme ich auch hin und wieder die ein oder andere Dienstleistung.
Ernährung und Sport sind zwei Steckenpferde von mir. Einmal habe ich die Ernährungstrainer B-Lizenz und auch die Ausbildung zum Fitnesstrainer (letztes ohne Abschluß). Beides vereint Beruf mit Hobby, da mein Shop den Bereich Sporternährung umfasst.
Mal so ganz am Rande, da du Mootools einsetzt, beim Benutzer also JS voraussetzt, warum blendest du stattdessen die Scrollleiste nicht ganz aus und lässte den User per JS scrollen? Deine “Lösung” ist nicht konsequent genug
@Bernd: Wie kommst du auf Mootols? Wenn überhaupt, ist hier jQuery am Werk. Das Beispiel bezog sich nicht explizit auf meine Seite, sondern soll eine generelle CSS-basierte Lösung darstellen.
Weil du es in deinem Artikel schreibst, das du das MooTools Akkordeon benutzt
Als CSS-Lösung gegen die Hopserei ist es natürlich brauchbar, aber wie oben schon gesagt, wenn schon JS vorausgesetzt, dann könnte man das auch konsequenter und schöner lösen…
Ach verdammt hast recht
Der Artikel ist schon relativ alt, ich hab den nur ganz kurz überflogen 