So lösen Sie das Höhenproblem von HTML- und Body-Elementen-HTML-Tutorial-php.cn

So lösen Sie das Höhenproblem von HTML- und Body-Elementen

云罗郡主

Freigeben： 2018-11-23 15:46:11

nach vorne

3215 Leute haben es durchsucht

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.

So lösen Sie das Höhenproblem von HTML- und Body-Elementen

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!