業(yè)務(wù)場(chǎng)景
最近在做一款h5頁(yè)面百度地圖定位服務(wù)時(shí)；需要在地圖的下方顯示部分業(yè)務(wù)信息，由于是使用jquery開發(fā)的項(xiàng)目，且本人比較菜沒有采用組件化開發(fā)，因此將頁(yè)面分為了以下兩部分，紅色區(qū)域1和紫色區(qū)域2(我知道這個(gè)數(shù)字寫的賊丑，哈哈哈)。
TIM圖片20200514201545.png
問題出現(xiàn)
由于在原生html頁(yè)面將內(nèi)容分成了兩部分，自定義底部信息展示(部分2)直接就使用了position:fixed，將其定位到了頁(yè)面底部，部分代碼如下：
.bottom-box {
width: 100%;
height: 82px;
color: #333;
font-family: PingFangSC-Regular;
padding: 16px;
position: fixed;
left: 0;
bottom: 0;
background-color: #fff;
box-sizing: border-box;
}
地圖部分(部分1)是使用iframe直接和底部信息組合到同一個(gè)頁(yè)面內(nèi)的，代碼如下：
html代碼
<iframe src="./bankMap.html" id="myIframe"></iframe>
<!-- 底部信息 -->
<div class="bottom-box">
<div class="name" id="name"></div>
<div class="times" id="times"></div>
<div class="btn-box" id="showPopup">
<img class="work-icon" src="./img/card.png" alt="" />
<span>工作證</span>
</div>
</div>
</body>
iframe樣式代碼
#myIframe {
width: 100%;
height: calc(100vh - 82px); /*82是底部信息展示區(qū)域高度*/
border: none;
}
本以為菜雞的開發(fā)就這樣結(jié)束了，看了一下手機(jī)上的幾個(gè)瀏覽器兼容性也還不錯(cuò)，簡(jiǎn)直開森到飛起；可是誰(shuí)曾想在手機(jī)的qq瀏覽器上卻出現(xiàn)了以下的問題。
錯(cuò)誤示例
100vh將整個(gè)瀏覽器顯示區(qū)域包含瀏覽器自帶的導(dǎo)航欄都算了進(jìn)去，所以在扣除82px之后，iframe中的縮放按鈕也被底部信息模塊擋住了(偷偷吐槽一下，別的瀏覽器，百度、包括震驚門uc啥的雖然也有底部導(dǎo)航欄，但是都未曾出現(xiàn)這個(gè)問題，而是和設(shè)計(jì)圖一樣)。
qq_err.jpg
解決辦法
將#myIframe的高度改用height:calc(100%-82px)去設(shè)置，但是卻出現(xiàn)了以下的問題：
qq.jpg
我覺得這是因?yàn)?myIframe默認(rèn)最小高度就是業(yè)務(wù)元素(縮放按鈕之類的能完全顯示就行)。這樣的話，我的頁(yè)面豈不是有涼涼了，，，，他娘的，，，等等，我剛剛說了啥？他娘的？哦哦，知道怎么解決了，css代碼修改如下：
#myIframe {
width: 100%;
height: calc(100% - 82px);
border: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
qq_succ.jpg
