Que se passe-t-il lorsque la hauteur de la page ou le pourcentage du div n'est pas valide ?

1. Avez-vous déjà dit que vous souhaitiez que la hauteur de la page ou le pourcentage du div soit invalide. Je crois que vous l'avez également recherché, ce qui signifie que vous devez définir le pourcentage du père à l'ancêtre html ? pour avoir un effet.

En un mot : si vous voulez fixer sa hauteur avec un pourcentage, alors au moins un de ses parents a une hauteur fixe, sinon tous les parents atteignent l'ancêtre html (car l'extérieur du html c'est le navigateur , il a une hauteur ) doit définir le pourcentage. Bien sûr, nous devons exclure les div qui sont hors du flux de documents, comme position:absolute,fixed. On peut considérer que leur parent est le navigateur, donc le pourcentage de hauteur est toujours valide, car la hauteur du navigateur peut. être atteint.

2. Parfois, le pourcentage n'est pas utilisé directement. Il peut y avoir une certaine marge et un remplissage qui doivent être déduits. Dans ce cas, vous pouvez utiliser height: calc(100% - 1rem height: calc(). 50% - 2px ); Attendez, les conditions valables pour cette situation doivent également être expliquées dans le premier point, car elle utilise également le pourcentage de hauteur.

Dans le cadre des exigences actuelles de mise en page réactive, de nombreux éléments qui peuvent ajuster automatiquement leur taille peuvent s'adapter à la hauteur et à la largeur, comme img, qui utilise {width:50%;height:auto;} pour réaliser que le la hauteur de l’image suit la largeur.

Cependant, la balise la plus couramment utilisée, Div, ne peut pas être ajustée automatiquement (soit héritée du parent, soit en spécifiant px par vous-même, soit en donnant un pourcentage ! Mais ce pourcentage est calculé en fonction de la taille du parent ), il n'est pas du tout basé sur la largeur de l'élément lui-même, donc la largeur et la hauteur du Div ne peuvent pas atteindre un certain rapport =-=).

Pour réaliser cette fonction (hauteur du div : largeur = 1:1), grâce à divers buffs, nous avons appris qu'il existe les méthodes de traitement suivantes

1, spécifier directement la largeur du div High + zoom pour obtenir un

div{width:50px;heigth:50px;zoom:1.1;}

adaptif. Cela peut obtenir un div préliminaire de largeur et de hauteur égales, mais les limitations sont trop grandes. PASSER!

2, déterminez dynamiquement la largeur du div via js pour définir la hauteur

div{width:50%;}

window.onresize = function(){div .height( div.width);}

peut également obtenir des divs de largeur et de hauteur égales, mais cela semble toujours un peu gênant, PASS !

3, défini par unités de largeur et de hauteur

div{width:20vw;height:20vw;/*20vw correspond à 20 % de la largeur de la fenêtre d'affichage*/}

Mais il y en a beaucoup L'appareil ne supporte pas cet attribut, la compatibilité est trop mauvaise, PASS !

4, défini par float

#aa{background:#aaa;;}
#bb{background:#ddd;;float:left}
#cc{ background :#eee;;float:right}

parent div
　

enfant div

;div id="cc">Child div

　

C'est celui utilisé pour effacer les erreurs

permet à l'élément parent aa de changer automatiquement la hauteur en fonction de la hauteur de l'élément enfant (placer un élément adaptatif dans l'élément enfant) pour ajuster le rapport hauteur/largeur pour être cohérent. Cependant, c'est trop gênant, PASSER!

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!