关于移动端常见的上下bar中间content scroll的布局，我原来的写法是content height:100%，然后再把上下bar fix在screen的上下，然而这样的布局是有很大的问题的。首先是滚动条的问题, 当以上面的方法来进行布局的时候，滚动区域位于上下bar之间, 滚动条却可以滚动到屏幕的最上方，这明显不符合直观的UI逻辑；二是很多时候下方的bar都是一个输入框，而在ios中fixed的定位可能会出现bug：当键盘出现时，此bar很可能会被弹到screen的中间。所以自己想了想该如何布局比较好，总结如下：
HTML：

1
2
3
4
5
6
7
<div class="container">
  <div class="header"></div>
  <div class="scrollContainer">
    <div class="content"></div>
  </div>
  <div class="footer"></div>
</div>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container{
  position: absolute;
  width: 100%;
  height: 100%;
}
.header, .footer{
  height: 50px;
}
.scrollContainer{
  margin: -50px 0;
  padding: 50px 0;
  height: 100%;
  box-sizing: border-box;
}
.content{
  height: 100%;
  overflow-y: scroll;
}

如果使用flex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container{
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.header,.footer{
  flex: 0 0 50px
}
.scrollContainer{
  flex: 1;
  overflow-y: scroll;
}

相对于传统css布局，flex使用更少的css和html即可达到想要的效果