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

Prozentuale Höhe in CSS: Das Rätsel lösen

Eines der häufigsten Probleme bei der Verwendung von CSS ist die Diskrepanz zwischen den Prozentwerten für Breite und Breite Höhe. Während Prozentwerte für die Breite wie erwartet funktionieren, gilt das Gleiche nicht für die Höhe.

Stellen Sie sich vor, Sie haben zwei Elemente: #working und #not-working, jeweils mit einem angegebenen Prozentwert für Breite und Höhe. Das #working-Element verhält sich wie erwartet: Seine Breite beträgt 80 % des Ansichtsfensters. Die Höhe des #not-working-Elements bleibt jedoch auf 0, obwohl es auf 30 % eingestellt ist.

Die Natur von Blockelementen

Um dieses Rätsel zu verstehen, müssen wir um in die Natur von Blockelementen in CSS einzutauchen. Standardmäßig bestimmen Blockelemente wie

ihre Höhe anhand ihres Inhalts. Dies bedeutet, dass sich ihre Höhe an die Größe des eingeschlossenen Inhalts anpasst.

Die Eltern-Kind-Beziehung

Beim Festlegen der Höhe eines Blockelements mithilfe eines Prozentwerts verweisen wir auf den übergeordneten Container des Elements. Im #not-working-Element ist das übergeordnete Element das Ansichtsfenster, für das keine bestimmte Höhe definiert ist. Infolgedessen gibt es eine endlose Rückkopplungsschleife zwischen Eltern und Kind und die Körpergröße kann nicht genau bestimmt werden.

Die Rückkopplungsschleife durchbrechen

Um dieses Problem zu lösen Damit die prozentuale Höhe ordnungsgemäß funktioniert, müssen wir die Rückkopplungsschleife unterbrechen, indem wir dem übergeordneten Element eine bestimmte Höhe zuweisen. Dies bietet einen festen Bezugspunkt für die Berechnung der prozentualen Höhe des untergeordneten Elements.

Zusammenfassend lässt sich sagen, dass Prozentwerte für die Höhe in CSS erfordern, dass das übergeordnete Element eine definierte Höhe hat, um Mehrdeutigkeiten zu vermeiden und genaue Berechnungen zu ermöglichen. Ohne eine feste übergeordnete Höhe bleibt die Höhe des untergeordneten Elements 0.

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!

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