Das erste Mal, dass ich hier meine eigene Frage stelle :)
Ich arbeite an einer Website und habe versucht, sie mit dem üblichen Trick vertikal bis zum unteren Rand des Client-Fensters zu verlängern:
html, body { height: 100%; }
.container { min-height: 100%; }Dann wollte ich einige Kopfzeilen über dem Hauptinhalt und eine klebrige Fußzeile am unteren Rand hinzufügen. Ich verpackte beides in eigene Container und zog die Kopfzeile wie folgt nach oben:
.top { position: relative; z-index: 1; height: 168px; }
.end { height: 58px; }Da ich die Höhe der Kopfzeile und der Fußzeile kannte, habe ich die Gesamthöhe der Seite so angepasst, dass sie das Client-Fenster genau ausfüllt (keine Bildlaufleisten), es sei denn, der Inhalt ist zu lang. Ich tat dies mit negativen Rändern:
.container { overflow: hidden; min-height: 100%; margin-top: -164px; margin-bottom: -58px; }
.container-in { margin-top: 164px; margin-bottom: 58px; }Der zweite Container befindet sich innerhalb des ersten und enthält den eigentlichen Inhalt der einzelnen Seiten.
Also, das funktioniert ganz gut auf Firefox 4/5 - Absolut nichts ist aus, es ist genau wie vorgesehen. Chrome scheint auch in Ordnung zu sein. Jedoch auf IE8, es ignoriert den negativen Rand auf .container (ich überprüft mit Entwickler-Tools). Der Container beginnt nach der .top, und als Ergebnis gibt es eine 164px Lücke zwischen der .top und der .container-in wegen der .container-in's margin.
Und das Lustige ist - wenn ich den IE8 in den IE7-Kompatibilitätsmodus schalte, tritt dieses Problem nicht mehr auf! Negative Ränder verhalten sich einfach gut im IE7-Modus, aber natürlich eine Reihe von anderen Sachen bricht, so dass IE zu sagen, Kompatibilitätsmodus zu verwenden ist keine Option.
Gibt es Ideen, wie man dieses Problem umgehen/eine andere Lösung verwenden kann, um in allen Browsern (IE7 nicht erforderlich) den gleichen Effekt zu erzielen? Mache ich etwas falsch?
EDIT: Nach einigen mehr Spaß und Spiele entdeckte ich, dass durch das Ersetzen der negativen Ränder mit negativen Top: Koordinaten (und Einstellung aller Container als relativ) es funktioniert perfekt auf IE8, aber jetzt lässt es eine 222px Lücke unter der HTML-Container in Firefox (laut Firebug). Verwirrt!
EDIT2: Ich glaube, ich weiß, was hier technisch gesehen falsch ist. Internet Explorer 8 hält den negativen Rand für "Überlauf", und da "Überlauf: Ausgeblendet" ist, tötet er den Rand. Wenn ich overflow: hidden entferne, tritt dieses Verhalten nicht mehr auf, aber der Rest des Designs wird dadurch zerstört. Hat jemand schon eine Idee?
