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

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-07 09:24:02363parcourir

Why Doesn't My Label Element Fill the Entire Height When Setting `height: 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn