兼容浏览器底部导航栏挤压页面显示区域

业务场景

最近在做一款h5页面百度地图定位服务时；需要在地图的下方显示部分业务信息，由于是使用jquery开发的项目，且本人比较菜没有采用组件化开发，因此将页面分为了以下两部分，红色区域1和紫色区域2(我知道这个数字写的贼丑，哈哈哈)。

TIM图片20200514201545.png

问题出现

由于在原生html页面将内容分成了两部分，自定义底部信息展示(部分2)直接就使用了position:fixed，将其定位到了页面底部，部分代码如下：

.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直接和底部信息组合到同一个页面内的，代码如下：

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是底部信息展示区域高度*/
      border: none;
    }

本以为菜鸡的开发就这样结束了，看了一下手机上的几个浏览器兼容性也还不错，简直开森到飞起；可是谁曾想 $\color{red}{calc(100vh - 82px)}$ 在手机的qq浏览器上却出现了以下的问题。

错误示例

100vh将整个浏览器显示区域包含浏览器自带的导航栏都算了进去，所以在扣除82px之后，iframe中的缩放按钮也被底部信息模块挡住了(偷偷吐槽一下，别的浏览器，百度、包括震惊门uc啥的虽然也有底部导航栏，但是都未曾出现这个问题，而是和设计图一样)。

qq_err.jpg

解决办法

将#myIframe的高度改用height:calc(100%-82px)去设置，但是却出现了以下的问题：

qq.jpg

我觉得这是因为#myIframe默认最小高度就是业务元素(缩放按钮之类的能完全显示就行)。这样的话，我的页面岂不是有凉凉了，，，，他娘的，，，等等，我刚刚说了啥？他娘的？哦哦，知道怎么解决了，css代码修改如下：

#myIframe {
      width: 100%;
      height: calc(100% - 82px);
      border: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

大家不难发现，利用position:fixed，将其四个角全部设置为0再利用width:100%;height:100%便可以完整获取浏览器显示区域大小，之后再进行扣除82px的操作便可以顺利解决这个问题了。nice啊！记录一下吧，最后的效果如下。

qq_succ.jpg

最后编辑于：2020.05.14 21:03:22