Heim > Artikel > Web-Frontend > So lösen Sie das Höhenproblem von HTML- und Body-Elementen
Der Inhalt dieses Artikels befasst sich mit der Lösung des Höhenproblems von HTML- und Körperelementen. Ich hoffe, dass er für Freunde in Not hilfreich ist.
Zuallererst: HTML-Elemente und Body-Elemente sind beide Elemente auf Blockebene.
Kurze Beschreibung: Manchmal stellen wir fest, dass height: 100 % nicht festgelegt ist, aber die Höhe der HTML- und Body-Elemente entspricht der Höhe des aktuellen Fensters. Es sieht so aus, als ob height: 100 % festgelegt ist.
Sehen Sie sich die folgenden zwei Beispiele an:
Beispiel 1:
<html> <head> <title>demo</title> <style type="text/css"> * { margin: 0; padding: 0; } .container { height: 30%; } </style> </head> <body> <div class="container"></div> </body> </html>
Zu diesem Zeitpunkt beträgt die Höhe des Containers 30 % der Fensterhöhe und die Höhe von Die HTML- und Body-Elemente geben beide die Fensterhöhe an.
Beispiel 2:
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> * { margin: 0; padding: 0; } .container { height: 30%; } </style> </head> <body> <div class="container"></div> </body> </html>
Zu diesem Zeitpunkt ist die Höhe des Containers 0, die eingestellte Höhe: 30 % wird nicht wirksam und die Höhe des HTML- und des Body-Elements ist beides 0.
Grund: Beispiel 1 legt den aktuellen Dokumenttyp nicht fest und der Kompatibilitätsmodus ist standardmäßig aktiviert. Die Höhe der HTML- und Body-Elemente im Kompatibilitätsmodus entspricht der Höhe des Fensters, während Beispiel 2 festlegt und aktiviert den Standardmodus, und die Höhe von HTML- und Body-Elementen im Standardmodus beträgt jeweils 0.
Das Obige ist eine vollständige Einführung in die Lösung des Höhenproblems von HTML- und Body-Elementen. Wenn Sie mehr über das Html5-Tutorial erfahren möchten, achten Sie bitte auf PHP Chinesische Website.
Das obige ist der detaillierte Inhalt vonSo lösen Sie das Höhenproblem von HTML- und Body-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!