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