Warum füllt mein Beschriftungselement nicht die gesamte Höhe aus, wenn ich „Höhe: 100 %' einstelle?

Problem mit der Etikettenhöhe bei der Prozenteinstellung

Obwohl die Höhe auf 100 % eingestellt ist, bleibt das Etikettenelement davon unberührt. Dies liegt daran, dass height: 100 %; basiert auf einem Referenzpunkt, typischerweise der Höhe des übergeordneten Elements.

Im bereitgestellten Code-Snippet hat .field label eine Höhe: 100 %; Eigenschaft, aber das übergeordnete Element, .field, gibt keinen Höhenwert an. Folglich fehlt dem Browser eine definierte Höhe, anhand derer 100 % berechnet werden können.

Um dieses Problem zu beheben, legen Sie einen Höhenwert für das übergeordnete .field-Element fest. Sie könnten beispielsweise eine feste Höhe zuweisen, indem Sie height: 200px; oder eine prozentuale Höhe basierend auf einem enthaltenden Element mit height: 50vh; (wobei vh die Höhe des Ansichtsfensters darstellt).

Geänderter Code:

<code class="css">.field {
    display: block;
    margin-bottom: 9px;
    background: none;
    border: none;
    height: 200px; /* Fixed height for reference */
}

.field label {
    color: #3E3E3E;
    font-weight: bold;
    width: 80px;
    display: block;
    float: left;
    margin-top: 5px;
    margin-left: 3px;
    height: 100%; /* Now it has a reference, 200px */
}</code>

Durch die Bereitstellung eines Höhenkontexts für das übergeordnete Element wird die 100 %-Höheneinstellung der Beschriftung übernommen Effekt, was zu einer vollständig erweiterten Beschriftung innerhalb des .field-Containers führt.

Das obige ist der detaillierte Inhalt vonWarum füllt mein Beschriftungselement nicht die gesamte Höhe aus, wenn ich „Höhe: 100 %' einstelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!