Diese Frage scheint millionenfach in verschiedenen Formen beantwortet worden zu sein, aber ich kann immer noch keine Antwort finden, die für mich funktioniert. Einfach gesagt, ich habe dieses Layout:
%Vor% Ich möchte, dass wrapper horizontal im Browser zentriert ist und 100% der Höhe des Browsers ausfüllt. Jedes der eingeschlossenen <div> -Elemente hat eine feste Höhe, die meistens zu einer Höhe summiert wird, die größer ist als die Höhe des Browserfensters. Wenn dies der Fall ist, bekomme ich das gewünschte Layout.
Wenn jedoch die Höhe des Browserfensters größer ist als die kombinierte Höhe der eingeschlossenen <div> -Elemente (wie es zum Beispiel bei einer iMac- oder Portrait-iPhone-Ausrichtung der Fall ist), dann scheint wrapper damit aufzuhören Das Ende von footer und der Rest des darunter liegenden Fensters ist <body> background. Die wrapper Hintergrund und <body> Hintergrund sind verschiedene Farben, so ist es ziemlich offensichtlich, dass dies der Fall ist.
Hat jemand dafür eine CSS-Lösung, so dass die wrapper die Browserhöhe ausfüllt, unabhängig davon, ob diese Höhe größer oder kleiner als die kombinierte Höhe des Inhalts ist?
BEARBEITEN: ANTWORT:
Die Antwort war eine Kombination der Antworten unten und etwas, auf das ich gerade gestoßen bin: Im CSS tun Sie Folgendes:
%Vor%Wenn Sie eine div height auf 100% setzen möchten, sollten Sie auch die Höhe von html und body auf 100% setzen. Dann können Sie 100% zum Div hinzufügen.
CSS
%Vor%Sieh dir das jfiddle an.
Wenn Sie ein Element haben möchten, das die Höhe des Ansichtsfensters zu 100% ausfüllt, benötigen Sie:
%Vor%