nicht angemeldet
Hi Leute,
ich bin grade dabei meine Website komplett neu zu programmieren - soll komplett valid sein (XHTML 1.0 Strict + CSS (mal schaun, ob ich 1.0 schaffe)), Inhalte und Formatierungen sollen ganz getrennt sein und zumindest WAI-A konform will ich sie dann auch noch hinkriegen.
Dazu mach ich mal alles mit DIVs und entsprechenden CSS-Klassen (was ein ganz schöner "Kampf" ist...).
Jedenfalls hab ich jetzt folgendes Problem:
Mein Hintergrundbild vom DIV-Container soll die Page vertikal zu 100% ausfüllen - und zwar immer.
D.h. wenn das Fenster so groß ist, dass der Inhalt nicht gescrollt werden muss, dann soll der Hintergrund trotzdem bis ganz hinunter gehen. Wenn der Inhalt gescrollt werden muss, dann soll beim Runterscrollen unten auch noch der Hintergrund weitergehen, bis zum Ende vom Inhalt (also dann auch bis ganz hinunter). Und wenn die Fenstergröße geändert wird, dann soll das Ganze natürlich auch passen.
Leider gibts hier Unterschiede zwischen IE und anderen Browsern und auch ohne diese Unterschiede wärs recht tricky. Jedenfalls hab ich folgende Varianten ausgetestet:
1.
für html, body und container:
height: 100%;
Firefox hat dann ein Problem, wenn das Fenster zu klein ist und gescrollt werden muss -> unten geht der Hintergrund nicht weiter!
Beim IE funktioniert so alles super.
2.
beim container statt height min-height (wird vom IE nicht unterstützt)
Firefox "verlängert" jetzt zwar den Hintergrund beim Scrollen, ein schmaler Streifen bleibt ganz unten aber trotzdem ohne Hintergrund.
IE: Nix mehr mit 100%, der Hintergrund geht nur mehr bis zum Ende vom Inhalt, egal wie groß das Fenster ist.
3.
beim container beide Zeilen:
height: 100%;
min-height: 100%;
(Reihenfolge ist anscheinend egal!)
Firefox hat wieder genau das gleiche Verhalten wie bei Variante 1.
Beim IE funktioniert wieder alles.
Hier der Link zur Seite, die ich meine:
http://www.powerhalse.at/_v4_/v4pro/
Kann mir irgendwer sagen, wie ich das Problem lösen kann?