移动端常见的页面结构（上下固定，中间可滑动）：

image.png

实现方式：

• 上下使用position:fixed结构
• 中间用padding:200px 0 60px来实现上下部分不遮挡中间的文案(具体间距根据自己页面来调整)

遇到问题：

iOS系统下，底部按钮有时无法点击，滑动中间区域后，底部按钮有时可点有时不可点

原因：

ios webkit 渲染和绘制不同步导致的（具体百度去吧，主要就是Safari浏览器兼容问题）

解决方法：

中间区域也使用 position:fixed;，eg：

    position: fixed;
    left: 0;
    top: 200px; //距离上面的间距
    right: 0;
    bottom: 60px; //一般是底部fixed区域的高度
    overflow-y: auto;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch; //ios添加惯性滑动