Flex布局，和position布局，实现上下固定中间部分滚动【另外附上最最最最简单的div滚动法】，以及table的溢出滚动，表头固定

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>

div区域滚动，最小的改动，最小的入侵，使用calc

不管是flex，不管是position。
设置中间区域的高度，然后中间区域超出之后滚动，而且底部因为被中间区域挤压着，自然会沉底。

table的溢出滚动

 <div  class="table-wrap">
                <el-table :data="tableData" style="width: 100%;height: 100%;" ref="tableRef" @selection-change="handleSelectionChange">
</div>

1.给table一个父级，父级给个固定高度，可以通过calc计算得到
2.给table的高度为100%
3.其他都不需要，表头也固定了