一个页面中有头部、底部和中间内容区域，底部固定在屏幕底端。
| 头部header |
| 内容main |
| 底部footer |
方法一、在main上使用fixed定位，加上overflow-y属性。
.main {
position: fixed;
top: 50px;
bottom: 50px;
overflow-y: scroll;
}不推荐这个fixed方案，因为页面偶尔卡住不动。
方法二、中间的main不设定位，高度100%，再padding头部和尾部，
其中头部和底部的定位设为absolute会比设为fixed体验更好（况且fix布局在移动端本来就有各种各样的问题，还是尽量避开:) ）。
html, body {
height: %;
}
main {
padding: 50px ;
height: %;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}ps:webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug
最常见的例子就是：
- 在safari上，使用了
-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动。 - 在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug。
- 通过动态添加内容撑开容器，结果根本不能滑动的bug。
1） 保证使用了该属性的元素上没有设置定位
如果出现偶尔卡住不动的情况，那么在使用该属性的元素上不设置定位或者手动设置定位为 position: static
这样会解决部分因为定位(relative、fixed、absolute)导致的页面偶尔不能滚动的bug。
2）如果添加动态内容页面不能滚动，让子元素height+1
如果在-webkit-overflow-scrolling:touch属性的元素上，想通过动态添加内容来撑开容器，触发滚动，是有bug 的，页面是会卡住不动的。
方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上，将height加1%或1px。从而主动触发scrollbar。
main-inner {
min-height: calc(% + 1px)
}你也可以直接加伪元素上：
main:after {
min-height: calc(% + 1px)
}文章摘抄自：https://www.cnblogs.com/xiahj/p/8036419.html