IOS得到焦点，唤醒输入法，header会被顶不见

Question

页面和微信一样，input得到焦点的时候布局就乱了。

不唤醒输入法的时候：

唤醒输入法的时候：

<div id="chat">
    <div class="header"></div>
    <div class="main">
        <div class="item" v-for="item in formData">{{item}}</div>
    </div>
    <div class="footer">
        <input type="text" placeholder="请输入" @focus="onFocus()">
    </div>
</div>

.header{
    width: 100%;
    height: 50px;
    background-color: pink;
}
.main{
    width: 100%;
    height: calc(100vh - 100px);
    background-color: #eee;
    overflow: auto;
    .item{
        padding: 10px;
    }
}
.footer{
    width: 100%;
    height: 50px;
    display: flex;
    align-items:center;
    background-color: pink;
    input{
        width: 90%;
        height: 20px;
        margin: 0 auto;
        border:none;
    }
}

该怎么解决呀，研究了半天没有头绪