Warum funktioniert die prozentuale Höhe in CSS nicht wie die prozentuale Breite?

Verstehen der prozentualen Höhe in CSS

In CSS funktioniert ein Prozentwert für die Breite wie erwartet, das Gleiche gilt jedoch nicht für die Höhe. Um dieses Verhalten zu verstehen, müssen wir die Standardhöhenberechnungen von Blockelementen untersuchen.

Standardhöhenberechnung:

Die Höhe eines Blockelements wird durch seinen Inhalt bestimmt . Wenn das Element Text, Bilder oder andere Blockelemente enthält, wird seine Höhe vergrößert, um den Inhalt aufzunehmen.

Prozentuelle Breite vs. prozentuale Höhe:

Wenn Sie angeben eine prozentuale Breite, die Breite des Elements wird als Prozentsatz der Breite seines übergeordneten Elements berechnet. Da Blockelemente von Natur aus genauso breit sind wie ihre übergeordneten Elemente, ergibt diese Berechnung einen genau definierten Wert in Pixel.

Die Höhe eines Blockelements hängt jedoch von seinem Inhalt ab. Die Angabe der Höhe: 50 % führt zu Mehrdeutigkeiten, da nicht klar ist, wie hoch die Höhe des übergeordneten Elements bei 50 % sein soll, wenn der eigene Inhalt des Elements möglicherweise seine Höhe variieren kann.

Rückkopplungsschleife durchbrechen:

Um diese Unklarheit zu lösen, müssen Sie die Rückkopplungsschleife zwischen Eltern und Kind durchbrechen. Dies kann durch explizite Angabe der Höhe des übergeordneten Elements erfolgen.

Zum Beispiel:

#parent {
  height: 200px;
}
#child {
  height: 50%;  /* Now calculates 50% of #parent's height */
}

Durch Angabe einer bestimmten Höhe für das übergeordnete Element kann die Höhe des untergeordneten Elements nun als definiert berechnet werden Prozentsatz, wodurch die prozentuale Höhe effektiv funktioniert.

Das obige ist der detaillierte Inhalt vonWarum funktioniert die prozentuale Höhe in CSS nicht wie die prozentuale Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!