Introduction to the method of making elements occupy the full screen in WeChat development

This article mainly introduces the relevant information on how to make the elements occupy the entire height of the screen in the WeChat applet. Friends in need can refer to the following

Making the elements occupy the entire height of the WeChat applet Screen height implementation method

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

The width is very simplewidth:100%

But as for the height, what we know isheight :100% must be used 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 the WeChat applet, you need to call wx.getSystemInfointerface, and then assign the value through setData

But obviously through js It is definitely not as efficient as CSS directly giving styles.

So we use another method:

Set body,html{height:100%};

Replace body and html in the web page Set it to 100% so that 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 the dom tree (I don’t know how to call it either) , let’s 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.

【Related recommendations】

1. WeChat public account platform source code download

2. Alizi order system source code download

The above is the detailed content of Introduction to the method of making elements occupy the full screen in WeChat development. For more information, please follow other related articles on the PHP Chinese website!