Heim >Web-Frontend >CSS-Tutorial >Warum füllt ein Div mit 100 % Höhe die Seite nur aus, wenn der DOCTYPE entfernt wird?
Warum füllt ein Div mit 100 % Höhe die Seite nur aus, wenn der DOCTYPE entfernt wird?
- Mary-Kate OlsenOriginal
- 2024-12-27 13:37:11440Durchsuche
Warum funktioniert die Höhe 100 %, wenn DOCTYPE entfernt wird?
Dieses Codefragment versucht, die gesamte Seite mit einem Grün zu füllen div:
<!DOCTYPE HTML> <html> <body>
Allerdings funktioniert es nicht wie erwartet. Das Div bleibt unsichtbar. Wenn wir die DOCTYPE-Deklaration () entfernen, wird das Div plötzlich erweitert, um die gesamte Seite auszufüllen. Dies wirft zwei Fragen auf:
Wie kann ich dafür sorgen, dass das Div die Seite ausfüllt, ohne die DOCTYPE-Deklaration zu entfernen?
Damit das Div die Seite ausfüllt, ohne es zu entfernen Für den DOCTYPE legen Sie einfach die Höhe des Stammelements (HTML) auf fest 100 %:
html { height: 100%; }
Warum funktioniert das Entfernen der DOCTYPE-Deklaration?
Wenn ein DOCTYPE vorhanden ist, rendert der Browser die Seite in Standards Modus. Im Standardmodus werden prozentuale Höhen von untergeordneten Elementen als height: auto behandelt, wenn das übergeordnete Element keine explizite Höhe hat. Aus diesem Grund füllt das Div die Seite im Standardmodus nicht aus.
Wenn jedoch der DOCTYPE fehlt, wechselt der Browser in den Quirks-Modus. Im Quirks-Modus werden prozentuale Höhen untergeordneter Elemente relativ zum Ansichtsfenster gemessen. Das bedeutet, dass das Div im obigen Beispiel die gesamte Seite im Quirks-Modus ausfüllt, da seine Höhe auf 100 % der Höhe des Ansichtsfensters eingestellt ist.
Fazit
Es ist wichtig, immer eine DOCTYPE-Deklaration einzuschließen, um sicherzustellen, dass die Seite im Standardmodus gerendert wird. Der Quirks-Modus ist unzuverlässig und unvorhersehbar und sollte unbedingt vermieden werden. Die bevorzugte DOCTYPE-Deklaration lautet einfach:
<!DOCTYPE html>
Das obige ist der detaillierte Inhalt vonWarum füllt ein Div mit 100 % Höhe die Seite nur aus, wenn der DOCTYPE entfernt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!