微信開發中使元素佔滿全螢幕的方法介紹

這篇文章主要介紹了微信小程式中使元素佔滿整個螢幕高度實現方法的相關資料,需要的朋友可以參考下

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

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

寬度很簡單就是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%}

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

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

【相關推薦】

1. 微信公眾號平台原始碼下載

2. 阿狸子訂單系統原始碼下載

以上是微信開發中使元素佔滿全螢幕的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！