Pourquoi ma hauteur CSS en pourcentage ne fonctionne-t-elle pas ?

La hauteur CSS ne fonctionne pas en pourcentage : un problème résolu

Lorsque vous définissez la hauteur d'un élément à 100 %, en vous attendant à ce qu'il occupe la toute la hauteur de son conteneur, mais ne pas voir ce comportement peut être une expérience frustrante. Le problème se pose car les ancêtres de l'élément doivent également avoir une hauteur définie.

Pour résoudre ce problème, attribuez une hauteur de 100 % à tous les éléments parents. Dans l'exemple fourni :

<div>

les éléments parents, html et body, doivent également avoir leur hauteur fixée à 100 % :

html, body { height: 100%; width: 100%; margin: 0; }

En s'assurant que tous les éléments ancestraux ont des hauteurs définies , l'élément enfant, div, occupera correctement toute la hauteur de son conteneur. En effet, sa hauteur est relative à l'élément contenant, et sans hauteur définie pour cet élément, ce que représente 100 % devient ambigu.

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!