Wie funktioniert HTMLs „height: 100 %' mit Prozentwerten und den Auswirkungen von DOCTYPE?

HTMLs Höheneigenschaft und Prozentwerte

In HTML kann die Höheneigenschaft auf einen Prozentwert festgelegt werden, um die Höhe anzugeben das Element relativ zu seinem übergeordneten Element. Dies funktioniert jedoch nur, wenn für das übergeordnete Element eine explizite Höheneinstellung festgelegt ist. Standardmäßig haben Elemente die implizite Höhe „auto“, was bedeutet, dass ihre Höhe automatisch basierend auf ihrem Inhalt bestimmt wird.

Der erste Teil Ihrer Frage, wie man das Div füllt Die Seite ohne Entfernen des DOCTYPE kann beantwortet werden, indem das CSS so geändert wird, dass es eine Höhendeklaration für das „html“-Element enthält:

html { Höhe: 100 %; }<br>

Diese Lösung macht das Entfernen des DOCTYPE überflüssig und stellt sicher, dass die Seite im Standardmodus gerendert wird, ohne die Höhenfunktionalität zu unterbrechen.

Quirks-Modus vs. Standards Modus

Der zweite Teil Ihrer Frage, der die Auswirkung des Entfernens des DOCTYPE betrifft, befasst sich mit dem Unterschied zwischen dem Quirks-Modus und dem Standardmodus.

Wenn ein DOCTYPE vorhanden ist, wechselt der Browser in den Standardmodus, der sich strikt an Webstandards hält. Wenn jedoch DOCTYPE weggelassen wird, wechselt der Browser in den Quirks-Modus, der versucht, das Verhalten älterer Browser zu emulieren.

Im Standardmodus werden Prozentsätze für die Höhe immer berechnet relativ zur Höhe ihres übergeordneten Elements. Da in Ihrem Beispiel das Body-Element keine explizite Höhe hat (es ist auf „auto“ gesetzt), wird die Div-Höhe von 100 % effektiv als „auto“ berechnet, was zu keinem sichtbaren Inhalt führt.

Im Gegensatz dazu arbeitet der Quirks-Modus mit weniger vorhersehbaren Regeln. In diesem Modus wird die Höhe des Div relativ zur Höhe des Ansichtsfensters berechnet, sodass das Div wie erwartet die gesamte Seite ausfüllen kann.

Fazit

Das Festlegen eines Höhenwerts von 100 % für ein Div funktioniert im Standardmodus nur dann wie beabsichtigt, wenn für das übergeordnete Element eine explizite Höhe definiert ist. Indem Sie die Höhe des HTML-Elements auf 100 % festlegen, können Sie sicherstellen, dass Prozentsätze für die Höhe innerhalb der Seite korrekt berechnet werden. Wenn der DOCTYPE entfernt wird, wechselt der Browser in den Quirks-Modus, der die Berechnung von Prozentsätzen ändert und es dem Div ermöglicht, die Seite mit einer Höhe von 100 % zu füllen, auch wenn die Höhe des übergeordneten Elements nicht explizit angegeben ist.

Das obige ist der detaillierte Inhalt vonWie funktioniert HTMLs „height: 100 %' mit Prozentwerten und den Auswirkungen von DOCTYPE?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!