参考：http://ask.dcloud.net.cn/question/22348
在ios上，当底部有fixed型输入框时，同时把内容列表也设置为fixed {position: fixed;top:0px;right:0px;left: 0px;bottom: 0px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
/*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{position: fixed;top:0px;right:0px;left: 0px;bottom: 0px;}
.content{background-color: yellow;}
.fcont{height: 2rem;line-height: 2rem;color: #fff;font-size: 1rem;}
</style>
</head>
<body>
<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>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script>
<!--<script type="text/javascript">
$("input").on("click", function() {
setTimeout(function(){
document.body.scrollTop = document.body.scrollHeight;
},300);
})
</script> -->
<!--<script>
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;
});
</script>-->
</body>
</html>