flex布局实现头尾固定，中间内容自适应

头尾固定，中间区域可以滑动效果是移动端最常见的效果，以京东页面为例。以前开发时常用的方法是用固定布局 position: fixed; 实现，但是该方法在 ios 上或者其他机型上会出现问题。现在，可以使用 flex 方法快速实现该布局。

 代码实现：

html部分：

  <div class="box">
    <div class="header">头部区域</div>
    <div class="content">中间内容区域</div>
    <div class="footer">底部区域</div>
  </div>

css部分：

html,body {
    height: 100%; /* 很重要 */
}
.box {
    width: 100%; 
    height: 100vh; /* 很重要，如果设置成 100%，页面内容过多时不会固定 */
    display: flex;
    flex-direction: co