以前在做PC端開發(fā)的時(shí)候，經(jīng)常會(huì)使用position: fix來做一些固定于窗口位置的一些頁面功能，比如全局居中的提示框和模態(tài)框，或者是頁頭頁腳等等~但是在移動(dòng)端做的時(shí)候長(zhǎng)了就會(huì)發(fā)現(xiàn)，我們要在一些場(chǎng)合避免使用fix布局.
使用flex布局來代替原來的fix布局，整個(gè)過程的核心思路為：

將表頭和列表視作兩大部分，它們的父元素設(shè)置display: flex，總高度為視口高度100vh，
并且設(shè)置布局方向?yàn)榇怪眆lex-direction: column, 子元素不伸縮 flex-shrink: 0
將表頭固定高度
列表主題部分設(shè)置撐開父元素高度除了表頭固定高度的剩余全部高度，然后內(nèi)部滾動(dòng)overflow: auto, 別忘記設(shè)置IOS上流暢滑動(dòng)屬性-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

  }
}