Warum funktioniert „height: 100 %;' bei einem Beschriftungselement nicht?

Höhe einstellen: 100 % auf Etikett funktioniert nicht

Beim Versuch, die Höhe eines Etikettenelements an sein übergeordnetes Element anzupassen, Höhe: 100 %; wurde umgesetzt. Der beabsichtigte Effekt trat jedoch nicht ein, so dass das Etikett eine willkürliche Höhe hatte.

Verstehen des Problems

Bei der Einstellung der Höhe: 100 % ist Folgendes zu beachten der Bezugspunkt. In diesem Fall muss die Höhe des übergeordneten Elements explizit definiert werden, um einen Größenkontext festzulegen. Ohne diesen Kontext hat der Browser keine Grundlage für die Berechnung von 100 % der Höhe.

So beheben Sie das Problem

Um dieses Problem zu beheben, stellen Sie sicher, dass das übergeordnete Element der Beschriftung dies hat eine Höhe angegeben. Dies kann über CSS oder durch Festlegen des Höhenattributs im HTML-Markup erreicht werden.

Beispielcode

<code class="css">.parent-element {
  height: 200px;
}

.field label {
  height: 100%;
}</code>

Durch Festlegen der Höhe des übergeordneten Elements auf 200 Pixel , das Beschriftungselement nimmt nun korrekt 100 % seines verfügbaren vertikalen Platzes ein.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „height: 100 %;' bei einem Beschriftungselement nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!