Wann sollte „height: 100 %“ vs. „min-height: 100 %“ in CSS verwendet werden?

height:100% vs. min-height:100%

Beim Versuch, die Höhe eines HTML-Elements zu steuern, bietet CSS zwei Möglichkeiten Wesentliche Eigenschaften: Höhe und Mindesthöhe. Diese Eigenschaften spielen eine unterschiedliche Rolle bei der Bestimmung der Größe eines Elements.

height:100%

Die Einstellung der Höhe auf 100 % bedeutet, dass ein Element erweitert werden soll, um die gesamte Höhe einzunehmen sein übergeordneter Container. Dies bedeutet, dass sich die Höhe des Elements dynamisch an die Größe seines übergeordneten Elements anpasst.

min-height:100%

Andererseits gibt min-height a an Mindesthöhe für ein Element. Wenn die berechnete Höhe des Elements unter Berücksichtigung anderer Faktoren wie Inhalt und Ränder weniger als 100 % beträgt, erzwingt min-height eine Höhe von 100 %. Wenn die berechnete Höhe jedoch 100 % überschreitet, hat die Mindesthöhe keine Auswirkung.

Hauptunterschied

Der Hauptunterschied zwischen Höhe:100 % und Mindesthöhe: 100 % liegt in ihrem Verhalten, wenn die berechnete Höhe eines Elements weniger als 100 % beträgt. Höhe:100 % ermöglicht, dass das Element unter 100 % schrumpft, während min-height:100 % diese Schrumpfung verhindert, indem eine Mindesthöhe von 100 % festgelegt wird.

Beispiel

Wenn Sie ein

mit height:100% und ohne explizite Mindesthöhe füllt es die gesamte Höhe seines übergeordneten Containers aus. Wenn Sie andererseits min-height:100 % für dasselbe

angeben, wird es niemals kleiner als 100 % der Höhe seines übergeordneten Containers sein, unabhängig von seinem Inhalt oder seinen Rändern.

Das obige ist der detaillierte Inhalt vonWann sollte „height: 100 %“ vs. „min-height: 100 %“ in CSS verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css less html if for while this

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was bewirkt das Schlüsselwort „auto“ in CSS-Eigenschaften wirklich?Nächster Artikel：Was bewirkt das Schlüsselwort „auto“ in CSS-Eigenschaften wirklich?

In Verbindung stehende Artikel

Mehr sehen

• Wie kann ich mit CSS abgerundete Ecken für eine gesamte Tabelle erzielen, wenn der Randradius nicht direkt auf Tabellenzeilen angewendet werden kann?
• Warum wird mein iFrame nicht horizontal zentriert und wie kann ich das Problem beheben?
• Wie kann ich responsive CSS-Stile speziell auf Mobilgeräte anwenden, ohne die Desktop-Präsentation zu beeinträchtigen?
• Wie erreicht man eine responsive Spaltenreihenfolge in Bootstrap 3 mithilfe von Push- und Pull-Klassen?
• Warum werden Bootstrap-Spalten bei XS-Größe nicht richtig umbrochen?