溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何解決layer彈出層自適應頁面大小的問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
網上的解決方案大都是以下幾種：
1、改成百分比形式。有bug，下面細說。
2、改成em，rem等。同上
3、采用area：auto。可能是因為采用了swiper的原因吧，這樣設置會導致彈出層出現“頂天立地”的效果
4、采用iframeAuto。這個沒太搞懂怎么用，而且網上查的資料，很多人都反映不能用。
5、根據當前頁面高度計算好以后，再填入高度。這應該是最優解，但是有點麻煩。
嘗試了很多辦法，都無法實現想要的效果，最后沒辦法，只能去研究為什么百分比和rem這種形式會有bug。
這個bug的效果是，雖然彈出窗按比例展示了，但是里面包含的一個div的由于高度很小，導致看不到任何內容。查看網頁代碼，很容易就找到出問題的所在，這個div的height只有50px，不知道怎么會這樣。
估摸著應該是js文件計算高度是出錯了。這個div的id是vlip1545899541487，猜測應該是一個固定前綴加了隨機數。只查找vlip，在vue-layer.js中果然找到了相應的代碼
id:"vlip"+(new Date).getTime()
id是vlip加時間戳生成的，然后再往后看，就會發現問題所在
{return{height:parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}直接去area的第二個參數轉成int值減去50再加上后綴“px”，所以假如我們配了80%的高度，最終的height只有30px。。。
所以只要把這里的生成代碼略加改動就好。
{return{height:this.options.area[1].indexOf("%")>=0?"90%":parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}增加三目運算符，判斷如果包含%的話，就寫死一個值90%。其實這樣不算完美，因為不同尺寸的顯示屏，90%所展示的效果都不太一樣。但是這樣比較省事。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決layer彈出層自適應頁面大小的問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
