HTML- und Körperhöhe: „height: 100 %' vs. „min-height: 100 %' – was sollten Sie verwenden?

Höhe vs. Mindesthöhe für HTML- und Body-Elemente

Beim Entwerfen von Layouts legen viele Entwickler die Höhe der HTML- und Body-Elemente fest auf 100 %. Bei diesem Ansatz können jedoch manchmal Probleme auftreten. In diesem Artikel werden die Unterschiede zwischen height: 100 % und min-height: 100 % für diese Elemente untersucht und Empfehlungen für deren Verwendung gegeben.

Der Hintergrund sowie die HTML- und Body-Elemente

Sowohl HTML- als auch Body-Elementen fehlt die inhärente Höhe. Standardmäßig sind sie auf height:auto eingestellt. Wenn Höhe: 100 % auf diese Elemente angewendet wird, wird die Höhe aus dem Ansichtsfenster bestimmt, sodass sie das gesamte Browserfenster ausfüllen können.

Höhe: 100 % vs. Mindesthöhe: 100 %

• Höhe: 100 %: Diese Einstellung legt die Höhe eines fest Element auf 100 % seines übergeordneten Containers. Wenn Sie es sowohl auf HTML als auch auf den Text anwenden, stellen Sie sicher, dass sie das gesamte Ansichtsfenster ausfüllen. Dieser Ansatz kann jedoch verhindern, dass sich der Körper ausdehnt, um Inhalte aufzunehmen, die die Höhe des Ansichtsfensters überschreiten, wodurch möglicherweise eine spürbare Lücke entsteht.
• min-height : 100 %: Diese Einstellung legt eine Mindesthöhe für ein Element fest. Wenn Sie es sowohl auf HTML als auch auf den Text anwenden, kann der Text nach Bedarf erweitert werden, es ist jedoch nicht garantiert, dass er das Ansichtsfenster ausfüllt, wenn der Inhalt nicht ausreicht.

Empfehlung: Verwenden Sie Höhe: 100 % für HTML und Mindesthöhe: 100 % für den Körper

Für Hintergrundbilder, die sich über das gesamte Browserfenster erstrecken, wird empfohlen, die Höhe wie folgt festzulegen: 100 % auf HTML und min-height: 100 % auf Text. Dadurch wird sichergestellt, dass HTML das gesamte Ansichtsfenster ausfüllt und eine Hintergrundleinwand bereitstellt, während sich der Text bei Bedarf vertikal ausdehnt und den Inhalt aufnimmt.

Das obige ist der detaillierte Inhalt vonHTML- und Körperhöhe: „height: 100 %' vs. „min-height: 100 %' – was sollten Sie verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!