H5页面头部吸顶，底部吸底，中间自适应滚动布局

效果如下：

代码如下：

<template>
      <div class="home">
        <div class="title">{{ title }}</div>
        <div class="content">
          <ul>
            <li>1.这是内容，这是内容……</li>
            <li>2.这是内容，这是内容……</li>
            <li>3.这是内容，这是内容……</li>
            <li>4.这是内容，这是内容……</li>
            <li>5.这是内容，这是内容……</li>
            <li>6.这是内容，这是内容……</li>
            <li>7.这是内容，这是内容……</li>
            <li>8.这是内容，这是内容……</li>
            <li>9.这是内容，这是内容……</li>
          </ul>
        </div>
        <div class="footer">
          <div class="btn">
            <el-button @click="handleSearch"> 取消 </el-button>
            <el-button type="primary" @click="handleSearch"> 确定 </el-button>
          </div>
        </div>
      </div>
</template>

<script>
export default {
  data () {
    return {
      title: '联报推荐'
    }
  },
  methods: {
    init () {
      this.drawer = true
    },
    handleClose () {
      this.drawer = false
    }
  }
}
</script>


<style lang="less" scoped>
  .home {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .title {
    padding-left: 24px;
    height: 56px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(33, 40, 49, 1);
    line-height: 56px;
    border-bottom: 1px solid rgba(233, 234, 237, 1);
  }

  .footer {
    border-top: 1px solid rgba(233, 234, 237, 1);
    height: 56px;
    .btn {
      margin: 12px 24px 0 0;
      justify-content: flex-end;
      display: flex;
    }
  }

  .content {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    overflow: scroll;
    ul {
      li {
        height: 300px;
      }
    }
  }
</style>