ios下底部input框被遮挡（第三方输入法还是有问题）

第一步：

父级元素CSS设置：

css
z-index: 99;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;

底部子元素CSS设置

css
z-index: 9999;
position: absolute;
left: 0;

第二步：

页面加载时，动态计算top值，此时页面初始化时，底部元素就会被固定在底部

js
mounted() {
    this.$nextTick(()=>{
        let pageHeight = document.documentElement.clientHeight
        this.top = pageHeight - this.$refs.footer.clientHeight
    })
}

第三步：

input获取焦点时，让底部元素在输入法之上

js
handleFocus() {
    let initBodyHeight = document.body.clientHeight;
    let footerHeight = this.$refs.footer.clientHeight;
    setTimeout(() => {
        let u = navigator.userAgent, app = navigator.appVersion;
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        document.body.scrollTop = document.body.scrollHeight;
        if (isIOS && document.body.clientHeight !== initBodyHeight) {
            this.top = initBodyHeight - footerHeight
        }
    }, 300);
}

第四步：此情况出现在需要固定的底部元素为子页面时：

例：home元素需要使用fixed布局

html
<div class="home">
    <router-link to="/publish" class="add"></router-link>
    <div class="content-container"> </div>
    <router-view></router-view>
</div>

此时需改变home的样式

css
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
height: 100%;