微信小程序中使元素占滿(mǎn)整個(gè)屏幕高度實(shí)現(xiàn)方法
微信小程序中使元素占滿(mǎn)整個(gè)屏幕高度實(shí)現(xiàn)方法
在項(xiàng)目中經(jīng)常要用到一個(gè)容器元素占滿(mǎn)屏幕高度和寬度，然后再在這個(gè)容器元素里放置其他元素。
寬度很簡(jiǎn)單就是width:100%
但是高度呢，我們知道的是height:100%必須是在父元素的高度給定了的情況下才可以。
以前我的做法是用js獲取屏幕的高度，然后將其賦值給height，
屏幕高度在網(wǎng)頁(yè)中為:window.innerHeight;
在微信小程序中則需要調(diào)用wx.getSystemInfo接口，然后通過(guò)setData賦值
但是顯然通過(guò)js來(lái)進(jìn)行的，效率上肯定不如css直接給定樣式。
于是我們使用另一種方法:
在網(wǎng)頁(yè)中設(shè)置body,html{height:100%};
將body和html設(shè)置為100%，這樣我們就可以在他們的子元素中使用height:100%來(lái)使的我們的容器元素占滿(mǎn)屏幕的高度啦。
但是在微信小程序中，是沒(méi)有dom對(duì)象的，但是我們看調(diào)試工具可以看到在dom樹(shù)(我也不知道怎么叫了，就這么叫吧)中，根節(jié)點(diǎn)是page，所以我們來(lái)試試使用page{height:100%}
果然，是可行的。高度占滿(mǎn)了整個(gè)小程序的窗口。
于是我可以愉快的繼續(xù)寫(xiě)我的小程序啦。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
- 微信小程序 for 循環(huán)詳解
- 微信小程序 input輸入框控件詳解及實(shí)例（多種示例）
- 微信小程序 數(shù)組（增，刪，改，查）等操作實(shí)例詳解
- 微信小程序 跳轉(zhuǎn)頁(yè)面的兩種方法詳解
- 微信小程序開(kāi)發(fā)（二）圖片上傳+服務(wù)端接收詳解
- 微信小程序 傳值取值的幾種方法總結(jié)
- 微信小程序-消息提示框?qū)嵗?/a>
- 微信小程序 input輸入框詳解及簡(jiǎn)單實(shí)例
- 微信小程序 wx.request(接口調(diào)用方式)詳解及實(shí)例
- 微信小程序 頁(yè)面跳轉(zhuǎn)傳參詳解
- 微信小程序 觸控事件詳細(xì)介紹
- 微信小程序通過(guò)api接口將json數(shù)據(jù)展現(xiàn)到小程序示例
- 微信小程序 小程序制作及動(dòng)畫(huà)（animation樣式）詳解
- 微信小程序 參數(shù)傳遞詳解
- 微信小程序 實(shí)現(xiàn)列表刷新的實(shí)例詳解
- 微信小程序 wx.request合法域名配置詳解
- 微信小程序設(shè)置http請(qǐng)求的步驟詳解
- 微信小程序里使用SVG矢量圖標(biāo)方法詳解
相關(guān)文章
這篇文章主要介紹了微信小程序 loading 組件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了js的一些潛在規(guī)則示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了開(kāi)發(fā)效率翻倍的Web?API使用技巧詳解，主要選取了一些有趣且有用的?Web?API?進(jìn)行介紹，并且?API?可以在線(xiàn)運(yùn)行預(yù)覽2023-05-05
這篇文章主要介紹了微信小程序 參數(shù)傳遞詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序radio組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
微信小程序手勢(shì)操作之單觸摸點(diǎn)與多觸摸點(diǎn)
這篇文章主要介紹了微信小程序手勢(shì)操作之單觸摸點(diǎn)與多觸摸點(diǎn)的相關(guān)資料,需要的朋友可以參考下2017-03-03
基于遷移學(xué)習(xí)的JS目標(biāo)檢測(cè)器構(gòu)建過(guò)程詳解
這篇文章主要為大家介紹了基于遷移學(xué)習(xí)的JS目標(biāo)檢測(cè)器構(gòu)建過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了commander腳手架工具使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
微信小程序中使元素占滿(mǎn)整個(gè)屏幕高度實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序中使元素占滿(mǎn)整個(gè)屏幕高度實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-12-12
服務(wù)器端的響應(yīng)是302 Found，在ajax的回調(diào)函數(shù)中能夠獲取這個(gè)狀態(tài)碼嗎？能夠從Response Headers中得到Location的值進(jìn)行重定向嗎？讓我們來(lái)一起動(dòng)手寫(xiě)寫(xiě)代碼看看實(shí)際情況吧。2013-10-10