Heim > Web-Frontend > CSS-Tutorial > Was ist der Unterschied zwischen „height: 100 %' und „min-height: 100 %', wenn die Höhe eines Divs in CSS festgelegt wird?

Was ist der Unterschied zwischen „height: 100 %' und „min-height: 100 %', wenn die Höhe eines Divs in CSS festgelegt wird?

Mary-Kate Olsen
Freigeben: 2024-10-31 10:57:01
Original
828 Leute haben es durchsucht

What's the difference between `height: 100%` and `min-height: 100%` when setting a div's height in CSS?

Höhe:100 % vs. Min-Höhe:100 %

Frage:

Was ist beim Festlegen der Höhe eines Divs mithilfe von CSS der Unterschied zwischen „height:100 %“ und „min-height:100 %“?

Antwort:

The Das World Wide Web Consortium (W3C) definiert die Beziehung zwischen diesen beiden Eigenschaften wie folgt:

  1. Die anfängliche Höhe des Div wird ohne Berücksichtigung von „Min-Höhe“ und „Max-Höhe“ bestimmt.
  2. Wenn die anfängliche Höhe „max-height“ überschreitet, berechnen Sie die Höhe neu, indem Sie „max-height“ als berechnete Höhe verwenden.
  3. Umgekehrt, wenn die resultierende Höhe kleiner als „min-height“ ist, Berechnen Sie die Höhe neu, indem Sie „Mindesthöhe“ als berechnete Höhe verwenden.

Zusammenfassung:

  • „Mindesthöhe“ überschreibt die berechnete Höhe wenn sie größer ist, unabhängig von der angegebenen Höhe.
  • „Max-height“ kann die angegebene Höhe außer Kraft setzen, wenn sie kleiner ist, aber sie kann „min-height“ nicht außer Kraft setzen.

Sonderfall:

  • „Höhe:100 %“ setzt die Höhe des Elements auf die Höhe des enthaltenden Blocks.
  • „Mindesthöhe:100 %“ stellt sicher, dass die Höhe mindestens 100 % beträgt, auch wenn explizit eine niedrigere Höhe angegeben wird. Beachten Sie, dass es nicht durch „max-height“ überschrieben werden kann.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen „height: 100 %' und „min-height: 100 %', wenn die Höhe eines Divs in CSS festgelegt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage