Flex布局实现上下固定中间部分滚动

flex 布局简介在上一篇可以找到，不再赘述。
此篇主要介绍使用Flex布局、传统的 position 布局如何解决上下固定中间部分滚动，工作之余写了个demo，直接上代码。

Flex布局实现上下固定中间部分滚动：

<div class="parent">
    <div class="header">header -- 固定</div>
    <div class="content">
      <p>content -- 滚动</p>
      <p>内容部分</p>
      <p>内容部分</p>
      <p>内容部分</p>
      <p>内容部分</p>
        ......
    </div>
    <div class="footer">footer -- 固定</div>
</div>

<style>
  .parent{
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #b6efff;
    text-align: center;
  }

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  p {
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #ccc;
  }

  .footer {
    height: 50px;
    line-height: 50px;
    background: #b6efff;
  }

</style>

传统布局实现上下固定中间部分滚动：

<div class="parent">
    <div class="top">top</div>
    <div class="center">
      <p>center1</p>
      <p>center2</p>
      <p>center3</p>
      <p>center...</p>
      <p>center.n</p>
    </div>
    <div class="bottom">bottom</div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .parent {
    background: blanchedalmond;
    height: 100vh;
    overflow-y: hidden;
  }

  .top,
  .bottom {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    background: seagreen;
    text-align: center;
    position: fixed;
  }

  .bottom {
    bottom: 0;
  }

  p {
    height: 50px;
    line-height: 50px;
    border: 1px dashed darkcyan;
  }

  .center {
    height: calc(100vh - 100px);
    position: relative;
    top: 50px;
    background: #ccc;
    overflow-y: scroll;
  }
</style>