Heim >Web-Frontend >HTML-Tutorial >So lösen Sie das Höhenproblem von HTML- und Body-Elementen
So lösen Sie das Höhenproblem von HTML- und Body-Elementen
- 云罗郡主nach vorne
- 2018-11-23 15:46:113212Durchsuche
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!