So stellen Sie sicher, dass Elemente im WeChat-Applet die gesamte Höhe des Bildschirms einnehmen

So belegen Sie, dass Elemente im WeChat-Applet die gesamte Bildschirmhöhe einnehmen

In Projekten wird häufig ein Containerelement verwendet, um die Bildschirmhöhe und -breite einzunehmen, und dann werden andere Elemente in diesem Containerelement platziert.

Die Breite ist einfach width:100%

Aber was die Höhe betrifft, wissen wir, dass height:100% angegeben werden muss, wenn die Höhe des übergeordneten Elements angegeben wird.

Mein bisheriger Ansatz bestand darin, js zu verwenden, um die Höhe des Bildschirms zu ermitteln und sie dann der Höhe zuzuweisen

Die Bildschirmhöhe auf der Webseite ist: window.innerHeight;

In WeChat müssen Sie im Applet die Schnittstelle wx.getSystemInfo aufrufen und dann den Wert

über setData zuweisen. Dies geschieht jedoch offensichtlich über js und ist definitiv nicht so effizient wie Direktes Festlegen des Stils mit CSS.

Also verwenden wir eine andere Methode:

Setzen Sie body,html{height:100%} auf der Webseite;

Setzen Sie body und html auf 100%, so wie wir können height:100% in ihren untergeordneten Elementen verwenden, damit unsere Containerelemente die volle Höhe des Bildschirms einnehmen.

Aber im WeChat-Applet gibt es kein DOM-Objekt, aber wenn wir uns das Debugging-Tool ansehen, können wir das im DOM-Baum sehen (ich weiß nicht, wie ich es nennen soll, nennen wir es einfach (das) ist der Wurzelknoten page , also versuchen wir es mit page{height:100%}

Tatsächlich ist es machbar. Die Höhe füllt das gesamte Applet-Fenster aus.

So kann ich gerne weiter an meinem kleinen Programm schreiben.

Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!

Weitere verwandte Artikel darüber, wie Elemente in WeChat-Miniprogrammen die gesamte Bildschirmhöhe einnehmen, finden Sie auf der chinesischen PHP-Website!