這篇文章主要介紹了如何解決layer彈出層自適應(yīng)頁(yè)面大小的問(wèn)題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括渾江網(wǎng)站建設(shè)、渾江網(wǎng)站制作、渾江網(wǎng)頁(yè)制作以及渾江網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，渾江網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到渾江省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

網(wǎng)上的解決方案大都是以下幾種：

1、改成百分比形式。有bug，下面細(xì)說(shuō)。

2、改成em，rem等。同上

3、采用area：auto?？赡苁且?yàn)椴捎昧藄wiper的原因吧，這樣設(shè)置會(huì)導(dǎo)致彈出層出現(xiàn)“頂天立地”的效果

4、采用iframeAuto。這個(gè)沒(méi)太搞懂怎么用，而且網(wǎng)上查的資料，很多人都反映不能用。

5、根據(jù)當(dāng)前頁(yè)面高度計(jì)算好以后，再填入高度。這應(yīng)該是最優(yōu)解，但是有點(diǎn)麻煩。

嘗試了很多辦法，都無(wú)法實(shí)現(xiàn)想要的效果，最后沒(méi)辦法，只能去研究為什么百分比和rem這種形式會(huì)有bug。

這個(gè)bug的效果是，雖然彈出窗按比例展示了，但是里面包含的一個(gè)div的由于高度很小，導(dǎo)致看不到任何內(nèi)容。查看網(wǎng)頁(yè)代碼，很容易就找到出問(wèn)題的所在，這個(gè)div的height只有50px，不知道怎么會(huì)這樣。

估摸著應(yīng)該是js文件計(jì)算高度是出錯(cuò)了。這個(gè)div的id是vlip1545899541487，猜測(cè)應(yīng)該是一個(gè)固定前綴加了隨機(jī)數(shù)。只查找vlip，在vue-layer.js中果然找到了相應(yīng)的代碼

id:"vlip"+(new Date).getTime()

id是vlip加時(shí)間戳生成的，然后再往后看，就會(huì)發(fā)現(xiàn)問(wèn)題所在

{return{height:parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}

直接去area的第二個(gè)參數(shù)轉(zhuǎn)成int值減去50再加上后綴“px”，所以假如我們配了80%的高度，最終的height只有30px。。。

所以只要把這里的生成代碼略加改動(dòng)就好。

{return{height:this.options.area[1].indexOf("%")>=0?"90%":parseInt(this.options.area[1])-50+"px",minHeight:"inherit",overflow:"auto"}}}

增加三目運(yùn)算符，判斷如果包含%的話，就寫(xiě)死一個(gè)值90%。其實(shí)這樣不算完美，因?yàn)椴煌叽绲娘@示屏，90%所展示的效果都不太一樣。但是這樣比較省事。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何解決layer彈出層自適應(yīng)頁(yè)面大小的問(wèn)題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文名稱：如何解決layer彈出層自適應(yīng)頁(yè)面大小的問(wèn)題-創(chuàng)新互聯(lián)
URL鏈接：http://weahome.cn/article/dcidgj.html