解决ios软键盘弹起遮盖住底部输入框的问题（终极解决方案！！！绝对好用）

html

<div class="layout_flex">
        <!-- 头部 -->
        <div class="header">header</div>
        <!-- 中间内容区域 -->
        <div class="content" id="content">
            <div class="dataList">
                <ul>
                    <li>数据趋势图/数据列表均调用此接口</li>
                    <li>数据趋势图/数据列表均调用此接口</li>
                    <li>数据趋势图/数据列表均调用此接口</li>
                </ul>
            </div>
        </div>
        <!-- 底部输入框部 -->
        <div class="footer">
            <div class="foter"><input type="text" name=""/></div>
            <div class="fcont">使用定时器是为了让输入框上滑时更加自然</div>
        </div>
    </div>

css样式

/*flex布局*/
html, body{height:100%;}
.layout_flex{display:-webkit-box;-webkit-box-orient:vertical;height:100%;}
.layout_flex .content{-webkit-box-flex:1;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;height:100%;}

/*头部*/
.header{height: 5rem;background-color: red;font-size: 2rem;line-height: 5rem;color: #fff;}

/*底部评论框*/
.footer{background-color: green;font-size: 2rem;color: #fff;padding: 0 1rem;}
.foter{padding: 1rem 0;}
.foter input{width: 100%;height: 3rem;line-height: 3rem;text-indent: 1rem;}
.content{background-color: yellow;}
.fcont{height: 2rem;line-height: 2rem;color: #fff;font-size: 1rem;}

js代码(可以不使用js)

var bfscrolltop = document.body.scrollTop;
   $("input").focus(function(){
        interval = setInterval(function(){
        document.body.scrollTop = document.body.scrollHeight;
        },100)
    }).blur(function(){
        clearInterval(interval);
        document.body.scrollTop = bfscrolltop;
    });

要解决苹果输入框弹起被软键盘遮住的问题，切记不能使用传统的fixed或者absolute布局，根本解决不了输入框被遮住的问题。网上看了很多的解决办法都没有实现。flex布局加上js的控制刚好解决了困扰我好久的问题。
--------------------- 
作者：miss_June 
来源：CSDN 
原文：https://blog.csdn.net/AliceWu_1111/article/details/80930810?utm_source=copy 
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于：https://blog.csdn.net/AliceWu_1111/article/details/80930810