Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to make the elements occupy the full screen in the development of Wechat". The content is simple and clear. I hope it can help you solve your doubts. Now let the editor lead you to study and learn the article "how to make the elements occupy the full screen in Wechat development".

The realization method of making elements occupy the whole screen height in WeChat Mini Programs

It is common to use a container element to fill the height and width of the screen in a project, and then place other elements in that container element.

The width is simple. It's width:100%.

But height, what we know is that height:100% can only be done if the height of the parent element is given.

In the past, I used to use js to get the height of the screen and assign it to height.

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

In WeChat Mini Programs, you need to call the wx.getSystemInfo interface, and then assign values through setData

But obviously, what is done through js is certainly not as efficient as the style given directly by css.

Set up body,html {height:100%} in the web page

Set body and html to 100% so that we can use height:100% in their child elements to make our container elements fill the height of the screen.

But in WeChat Mini Programs, there is no dom object, but we can see that in the dom tree (I don't know what to call it, 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 occupies the whole window of Mini Program.

So I can happily continue to write my Mini Program.

The above is all the contents of the article "how to make elements full screen in Wechat development". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.