HTML- und Körperhöhe: 100 % vs. Mindesthöhe: 100 % – Welche sollte ich verwenden?

Höhe vs. Mindesthöhe für HTML- und Textelemente: Die Unterschiede verstehen

Beim Webdesign kann es entscheidend sein, ein Layout zu erreichen, das das Browserfenster ausfüllt. Entwickler legen die Höhe der HTML- und Body-Elemente oft auf 100 % fest und erwarten, dass sie sich auf die volle Fenstergröße ausdehnt. In bestimmten Szenarien schlägt dieser Ansatz jedoch fehl. Ziel dieses Artikels ist es, Licht ins Dunkel zu bringen und die empfohlene Lösung bereitzustellen.

Warum Height: 100 % oder Min-Height: 100 % fehlschlagen können

HTML und Body auf height: 100 setzen % verhindert, dass sich das Körperelement über die Höhe des Ansichtsfensters hinaus ausdehnt. Dies hinterlässt eine auffällige Lücke am unteren Rand der Seite, was oft ein unerwünschtes Ergebnis ist.

Andererseits funktioniert „min-height: 100 %“ für beide Elemente nicht, da „min-height“ mit einem Prozentsatz nicht gilt zum Body-Element, es sei denn, in HTML ist eine explizite Höhe definiert.

Die empfohlene Lösung: Höhe: 100 % bei HTML, Min-Höhe: 100 % bei Körper

Um diese Einschränkungen zu beheben, wird empfohlen, HTML auf Höhe: 100 % und Körper auf Mindesthöhe: 100 % zu setzen. Dies ermöglicht:

• HTML kann auf die Höhe des Ansichtsfensters erweitert werden.
• Körper kann erweitert werden, um den Seiteninhalt aufzunehmen, während eine Mindesthöhe von 100 % beibehalten wird.

Hintergrundbilder: Ein Sonderfall

Beim Anwenden von Hintergrundbildern auf HTML und Textkörper, die das Browserfenster ausfüllen, gilt weder die Höhe: 100 % oder min-height: 100 % funktionieren effektiv. Stattdessen wird die folgende Vorgehensweise empfohlen:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

Dadurch kann das Hintergrundbild das gesamte Browserfenster ohne Lücken oder Überläufe abdecken.

Das obige ist der detaillierte Inhalt vonHTML- und Körperhöhe: 100 % vs. Mindesthöhe: 100 % – Welche sollte ich verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!