flex如何实现头部固定，内容区域滚动？

Question

问题：类似PC端使用position:fixed能够实现的功能。

Answer 1

我平常是给头部固定高度，然后内容页给height: calc(100% - 头部高度);overflow-y: scoll;来实现的。话说为什么要用flex去实现这个？

Answer 2

可以看看我写的：flex固定头部

Answer 3

html,body{
      margin: 0;
      padding: 0;
    }
    .wrap{
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow-y: hidden;
    }
    .head{
      height: 80px;
      background: #f00;
    }
    .footer{
      height: 80px;
      background: #fc0;
    }
    .content{
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow-y: scroll;
    }
    .item{
      display: flex;
      height: 200px;
      flex-shrink: 0;
      background: #1ab394;
      margin-top: 10px;
    }

<div class="wrap">
    <div class="head">头部</div>
    <div class="content">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    <div class="footer">底部</div>
  </div>

<iframe height='265' scrolling='no' title='flex-srcoll' src='//codepen.io/rolitter/embed/mzLOxm/?height=265&theme-id=light&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen flex-srcoll by rolitter (@rolitter) on CodePen.
</iframe>