以前在做PC端开发的时候，经常会使用position: fix来做一些固定于窗口位置的一些页面功能，比如全局居中的提示框和模态框，或者是页头页脚等等~但是在移动端做的时候长了就会发现，我们要在一些场合避免使用fix布局.
使用flex布局来代替原来的fix布局，整个过程的核心思路为：

将表头和列表视作两大部分，它们的父元素设置display: flex，总高度为视口高度100vh，
并且设置布局方向为垂直flex-direction: column, 子元素不伸缩 flex-shrink: 0
将表头固定高度
列表主题部分设置撑开父元素高度除了表头固定高度的剩余全部高度，然后内部滚动overflow: auto, 别忘记设置IOS上流畅滑动属性-webkit-overflow-scrolling: touch;
源码如下：

.container {
  height 100vh
  display flex
  flex-direction column
  flex-shrink 0
  .list-header {
    height 88px
  }
  .list-body {
    flex 1
    overflow auto
    -webkit-overflow-scrolling touch

  }
}