关于h5页面苹果手机使用fixed定位tabbar最底部时遮挡内容问题

在使用uni-app时，自己写了个底部tabbar导航栏，出现了tabbar遮挡内容的问题，如下图所示；

 

刚开始的时候，使用了顶部盒子padding-bottom 来时底部盒子撑开，在chrome浏览器中查看，效果无误

但是呢！！！

当任务数据一旦多了之后，还是会有遮挡问题，并且遮挡问题在ios也就是苹果手机上的浏览器中打开没有实现想要的效果；

百度多次查询文档，并没有发现可行的办法，最后是在微信的技术群里提出的问题，还好啊，三个技术群就一个正八经的能给你解答问题的，剩下的都是叫你去百度；

解决方法如下

其实也很简单，只不过对于我这个小白来说，解决了好半天；

看你的布局

我的布局是内容部分是个盒子，底部tabbar是个单独的盒子，然后外面用大盒子包裹起来的；

<div>
        <div>内容</div>
        <tabbar>导航栏</tabbar>
    </div>

因为我的是用uni-app写的，这里就大致列出一下

在这样的布局下，在内容部分使用伪元素：：after{  }

将伪元素的高度给到和tabbar的高度一致，这样就撑开了整个底部盒子，这样就解决了ios页面tabbar导航栏遮挡的问题！

真的是一次非常好的经验。