Pourquoi « hauteur : 100 % ; » ne fonctionne-t-il pas sur un élément d'étiquette ?

Régler la hauteur : 100 % sur l'étiquette ne fonctionne pas

Pour tenter d'aligner la hauteur d'un élément d'étiquette avec son parent, hauteur : 100 % ; a été mise en œuvre. Cependant, l'effet escompté ne s'est pas matérialisé, laissant l'étiquette avec une hauteur arbitraire.

Comprendre le problème

Lors du réglage de la hauteur : 100 % ;, il est important de prendre en compte le point de référence. Dans ce cas, la hauteur de l'élément parent doit être explicitement définie pour établir un contexte de dimensionnement. Sans ce contexte, le navigateur n'a aucune base pour calculer 100 % de la hauteur.

Comment résoudre

Pour résoudre ce problème, assurez-vous que l'élément parent de l'étiquette a une hauteur spécifiée. Ceci peut être réalisé via CSS ou en définissant l'attribut height dans le balisage HTML.

Exemple de code

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

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

En définissant la hauteur de l'élément parent sur 200px , l'élément label occupera désormais correctement 100 % de son espace vertical disponible.

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!