Comment faire en sorte que les éléments occupent toute la hauteur de l'écran dans l'applet WeChat

Comment faire en sorte que les éléments occupent toute la hauteur de l'écran dans l'applet WeChat

Dans les projets, un élément conteneur est souvent utilisé pour occuper la hauteur et la largeur de l'écran, puis d'autres éléments sont placés dans cet élément conteneur.

La largeur est simplement width:100%

Mais comme pour la hauteur, ce que nous savons c'est que height:100% doit être donné lorsque la hauteur de l'élément parent est donnée.

Mon approche précédente consistait à utiliser js pour obtenir la hauteur de l'écran, puis à l'attribuer à la hauteur

La hauteur de l'écran dans la page Web est : window.innerHeight;

Dans WeChat Dans le mini-programme, vous devez appeler l'interface wx.getSystemInfo, puis attribuer la valeur

via setData. Cependant, cela se fait évidemment via js, et ce n'est certainement pas aussi efficace. comme définir directement le style avec CSS.

Nous utilisons donc une autre méthode :

Définissons body,html{height:100%} dans la page Web ;

Définissons body et html à 100 %, comme ceci. peut utiliser height:100% dans leurs éléments enfants pour que nos éléments conteneurs occupent toute la hauteur de l'écran.

Mais dans l'applet WeChat, il n'y a pas d'objet DOM, mais quand on regarde l'outil de débogage, on peut le voir dans l'arborescence DOM (je ne sais pas comment l'appeler, appelons-le simplement cela), le nœud racine est page , essayons donc d'utiliser page{height:100%}

Bien sûr, c'est faisable. La hauteur remplit toute la fenêtre de l'applet.

Je peux donc continuer avec plaisir à écrire mon petit programme.

Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

Pour plus d'articles sur la façon de faire en sorte que des éléments occupent toute la hauteur de l'écran dans les mini-programmes WeChat, veuillez faire attention au site Web PHP chinois !