代码如下:
<style>
header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
/* main定位,进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
}
main .content {
height: 2000px;
}
/* 元素内的滚动非常不流畅,滑动的手指松开后,滚动立刻停止,失去了原本的流畅滚动特性,给main加上如下代码即可。 */
main {
/* main定位,进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
/* 增加该属性,可以增加弹性 */
-webkit-overflow-scrolling: touch;
}
</style>
<body class="layout-scroll-fixed">
<!-- fixed定位的头部 -->
<header>
</header>
<!-- 可以滚动的区域 -->
<main>
<div class="content">
<!-- 内容在这里... -->
</div>
</main>
<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
  可以参考我做的:DEMO
  这里是用了absolute来代替fixed效果,这是一个我认为比较好的解决方法,只要看仔细一点没啥样式冲突问题。
  · JS监控输入框到屏幕顶的高度
  用js监控focus时的高度,然后控制变化,这个会出现回复框停留一段时间的问题。不建议用这种方法,具体代码网上有很多。
  · iscroll.js
  不在万不得已的情况下,我们尽量尝试一下不依赖第三方库的布局方案,注意别冲突掉样式和功能。