Was ist der Unterschied zwischen CSS „height: auto' und „height: 100 %'?

Die subtilen Unterschiede zwischen „height: auto“ und „height: 100 %“ in CSS verstehen

Beim Stylen von Elementen mit CSS wird die Die Eigenschaften „height: auto“ und „height: 100 %“ können verwendet werden, um die vertikale Dimension eines Elements zu steuern. Das Verständnis ihrer unterschiedlichen Verhaltensweisen ist jedoch entscheidend, um die gewünschten Ergebnisse zu erzielen.

'height: 100%'

Wenn 'height: 100%' auf ein Element angewendet wird, Es erbt den vertikalen Raum seines übergeordneten Containers. Mit anderen Worten: Es dehnt und zieht sich entsprechend der Körpergröße des Elternteils zusammen.

Wenn Sie beispielsweise einen <div> mit einer Höhe von 500px und wenden Sie „height: 100%;“ an. zu seinem untergeordneten Element „innerDiv“ hat „innerDiv“ ebenfalls eine Höhe von 500 Pixel.

'height: auto'

Im Gegensatz dazu hat 'height: auto' Setzt die Höhe des Elements auf seine eigentliche Größe. Dies bedeutet, dass es sich an den Inhalt anpasst, den es enthält, sodass untergeordnete Elemente seine Dimension beeinflussen können.

Wenn wir beispielsweise ein weiteres untergeordnetes Element „evenInner“ zu „innerDiv“ mit einer Höhe von 10 Pixel hinzufügen, wird „innerDiv“ passt seine Höhe automatisch auf 10 Pixel an, unabhängig von der des übergeordneten Containers Höhe.

Beispiele:

<div>

In diesem Fall hat „innerDiv“ eine Höhe von 500 Pixel, da es von seinem übergeordneten Element erbt.

<div>

Hier hat „innerDiv“ eine Höhe von 10 Pixel, da das untergeordnete Element „evenInner“ dies erfordert Raum.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen CSS „height: auto' und „height: 100 %'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!