CSS-Höhe: „100 %' vs. „auto' – Was ist der wirkliche Unterschied?

Den Unterschied zwischen CSS-Höhe: 100 % und Höhe: automatisch verstehen

In CSS definiert die Höheneigenschaft die vertikale Dimension eines Elements . Die ihm zugewiesenen Werte können jedoch zu unterschiedlichen Ergebnissen führen:

Höhe: 100 %

Dieser Wert setzt die Höhe eines Elements auf 100 % der Höhe von sein übergeordneter Container. Mit anderen Worten: Das Element füllt den gesamten verfügbaren vertikalen Raum innerhalb seines übergeordneten Elements aus.

height: auto

auto gibt an, dass die Höhe eines Elements automatisch berechnet werden soll von der Größe des Inhalts ab. Dieser Wert wird häufig verwendet, wenn der Inhalt dynamisch ist und seine Höhe variieren kann.

Beispiele zur Verdeutlichung

Um den Unterschied weiter zu veranschaulichen:

Beispiel 1: Höhe: 100 %

<div>

In diesem Beispiel die äußere div hat eine feste Höhe von 50 Pixel. Wenn Sie dem inneren Div eine Höhe von 100 % zuweisen, füllt es die gesamten 50 Pixel seines übergeordneten Containers aus.

Beispiel 2: height: auto

<div>

Hier Beispielsweise hat das äußere Div wieder eine Höhe von 50 Pixel. Da das innere Div „height: auto“ hat, passt es seine Höhe an seinen Inhalt an, in diesem Fall das zweite Div mit einer Höhe von 10 Pixeln. Daher hat das innere Div eine Höhe von 10 Pixel.

Das obige ist der detaillierte Inhalt vonCSS-Höhe: „100 %' vs. „auto' – Was ist der wirkliche Unterschied?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!