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

Dépannage « hauteur : 100 % » ne fonctionne pas pour l'élément d'étiquette

Tentative de définition de la hauteur d'un élément d'étiquette à l'aide de « hauteur : 100 %;" peut ne pas donner le résultat souhaité. Pour comprendre cela, approfondissons le concept de calcul de hauteur en HTML.

La hauteur d'un élément, y compris une étiquette, est déterminée par la hauteur de l'élément parent. Dans le code fourni, l'étiquette est imbriquée dans un div avec la classe « champ ». Pour « hauteur : 100 % ; » pour fonctionner correctement, la "hauteur" du div parent doit être explicitement définie. En effet, par défaut, les éléments HTML n'ont pas de hauteur inhérente.

Dans l'exemple de code, la propriété "height" du div "field" n'est pas spécifiée. Par conséquent, le navigateur ne dispose d’aucun point de référence pour calculer la hauteur de l’étiquette de « 100 % ». Pour résoudre ce problème, vous devez définir la hauteur du div « champ », tel que :

<code class="css">.field {
    height: 400px; /* Set the parent div's height */
}</code>

Une fois la hauteur du div parent spécifiée, "height: 100%;" s'appliquera correctement à l'élément label, l'amenant à occuper toute la hauteur disponible dans son div parent.

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!