css 移动端实现头部 底部固定 中间内容滚动

自己平常编码最常用到的三种方法：

方法一：flex布局

<style>
      *{
        margin: 0;
        padding: 0;
      }
      .container{
        display: flex;
        height: 100vh;
        flex-direction: column;
      }
      .head,.footer {
        height: 40px;
        width: 100%;
      }
      .head {
        background: red;
      }
      .footer {
        background: goldenrod;
      }
      .main {
        width: 100%;
        flex: 1;
        overflow-y: scroll;
      }
      .main div {
        background: #8bc34a;
        height: 200px;
        margin: 20px auto;
        width: 300px;
      }
    </style>

方法二：绝对定位

<style>
      *{
        margin: 0;
        padding: 0;
      }
      .head,.footer {
        height: 40px;
        width: 100%;
        position: absolute;
      }
      .head {
        top: 0;
        background: red;
      }
      .footer {
        background: goldenrod;
        bottom: 0;
      }
      .main {
        width: 100%;
        position: absolute;
        top: 40px;
        bottom: 40px;
        overflow-y: scroll;
      }
      .main div {
        background: #8bc34a;
        height: 200px;
        margin: 20px auto;
        width: 300px;
      }
    </style>

方法三：函数calc()计算内容高度

<style>
      *{
        margin: 0;
        padding: 0;
      }
      .head,.footer {
        height: 40px;
        width: 100%;
      }
      .head {
        background: red;
      }
      .footer {
        background: goldenrod;
      }
      .main {
        width: 100%;
        overflow-y: scroll;
        height: calc(100vh - 80px); /* 80px: head与footer的高度 */
      }
      .main div {
        background: #8bc34a;
        height: 200px;
        margin: 20px auto;
        width: 300px;
      }
    </style>

html

<div class="container">
  <div class="head">固定头部</div>
  <div class="main">
    <div>
      main
    </div>
    <div>
      main
    </div>
    <div>
      main
    </div>
  </div>
  <div class="footer">固定底部</div>
</div>