Wann sollte „height: 100 %' vs. „min-height: 100 %' in CSS verwendet werden?-CSS-Tutorial-php.cn

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

Barbara Streisand

Freigeben： 2024-10-31 01:11:02

Original

375 Leute haben es durchsucht

When to use `height: 100%` vs. `min-height: 100%` in CSS?

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!

Quelle：php.cn

Vorheriger Artikel：Was bewirkt das Schlüsselwort „auto“ in CSS-Eigenschaften wirklich? Nächster Artikel：Wie kann ich die Größe eines Bildes dynamisch an das Browserfenster anpassen?

Erklärung dieser Website

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

1710

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

1874

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1586

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...