微信小程式中使元素佔滿整個螢幕高度實作方法

微信小程式中使元素佔滿整個螢幕高度實現方法

在專案中經常要用到一個容器元素佔滿螢幕高度和寬度，然後再在這個容器元素裡放置其他元素。

寬度很簡單就是width:100%

但是高度呢，我們知道的是height:100%必須是在父元素的高度給定了的情況下才可以。

以前我的做法是用js獲取屏幕的高度，然後將其賦值給height，

屏幕高度在網頁中為:window.innerHeight;

在微信小程序中則需要調用wx.getSystemInfo接口，然後透過setData賦值

但是顯然透過js來進行的，效率上肯定不如css直接給定樣式。

於是我們使用另一種方​​法:

在網頁中設定body,html{height:100%};

將body和html設定為100%，這樣我們就可以在他們的子元素中使用height: 100%來使的我們的容器元素佔滿螢幕的高度啦。

但是在微信小程式中，是沒有dom物件的，但是我們看調試工具可以看到在dom樹(我也不知道怎麼叫了，就這麼叫吧)中，根節點是page，所以我們來試試用page{height:100%}

果然，是可行的。高度佔滿了整個小程式的視窗。

於是我可以愉快的繼續寫我的小程式啦。

感謝閱讀，希望能幫助大家，謝謝大家對本站的支持！

更多微信小程式中使元素佔滿整個螢幕高度實現方法相關文章請關注PHP中文網！