How to make elements occupy the entire height of the screen in WeChat applet

How to make elements occupy the entire screen height in the WeChat applet

In projects, a container element is often used to occupy the screen height and width, and then other elements are placed in this container element.

The width is simply width:100%

But as for the height, what we know is that height:100% must be given when the height of the parent element is given.

My previous approach was to use js to get the height of the screen, and then assign it to height.

The screen height in the web page is: window.innerHeight;

In WeChat In the mini program, you need to call the wx.getSystemInfo interface, and then assign the value

through setData. However, obviously it is done through js, which is definitely not as efficient as directly setting the style with css.

So we use another method:

Set body,html{height:100%};

Set body and html to 100% in the web page, like this We can use height:100% in their child elements to make our container elements occupy the full height of the screen.

But in the WeChat applet, there is no DOM object, but when we look at the debugging tool, we can see that in the DOM tree (I don’t know how to call it, let’s just call it that), the root node is page , so let’s try using page{height:100%}

Sure enough, it is feasible. The height fills the entire applet window.

So I can happily continue writing my small program.

Thank you for reading, I hope it can help you, thank you for your support of this site!

For more related articles on how to make elements occupy the entire height of the screen in WeChat mini programs, please pay attention to the PHP Chinese website!