Pourquoi mon élément d'étiquette ne remplit-il pas toute la hauteur lors de la définition de « hauteur : 100 % ; » ?

Problème de hauteur d'étiquette avec le réglage du pourcentage

Malgré le réglage de la hauteur à 100 %, l'élément d'étiquette n'est pas affecté. En effet, hauteur : 100 % ; s'appuie sur un point de référence, généralement la hauteur de l'élément parent.

Dans l'extrait de code fourni, l'étiquette .field a une hauteur : 100 % ; propriété, mais l'élément parent, .field, ne spécifie pas de valeur de hauteur. Par conséquent, le navigateur ne dispose pas d'une hauteur définie par rapport à laquelle calculer 100 %.

Pour résoudre ce problème, établissez une valeur de hauteur pour l'élément parent .field. Par exemple, vous pouvez attribuer une hauteur fixe en utilisant height: 200px; ou un pourcentage de hauteur basé sur un élément conteneur utilisant height: 50vh; (où vh représente la hauteur de la fenêtre d'affichage).

Code modifié :

<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>

En fournissant un contexte de hauteur pour l'élément parent, le paramètre de hauteur de 100 % de l'étiquette prendra effet, ce qui entraîne une étiquette entièrement développée dans le conteneur .field.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!