H5 页面布局 - 滚动条限制

描述：当一个H5页面有头部与尾部的时候，在滑动页面的时候，滚动条会盖在上面，覆盖页面上的所有元素，不大美观，如何做到跟真机一样的效果，直接在指定区域呢？如下图所示进度条区域：

---

---

<template>
  <div class="Index">
    <header>标题</header>
    <section class="content">
      <router-link to="/index2">
        <button>下一步</button>
      </router-link>
      <div v-for="v in 200" :key="v">Test {{v}}</div>
    </section>
    <footer class="footer">
      <div>提交</div>
    </footer>
  </div>
</template>
<style lang="less" scoped>
.Index {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: auto;
  left: 0;
  right: 0;
  margin: 0 auto;

  header {
    height: 50px;
    display: flex;
    border-bottom: 1px solid whitesmoke;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 50px;
    display: block;
    color: #000000;
  }
  .content {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  footer {
    display: block;
    text-align: center;
    border-top: 1px solid whitesmoke;
    padding: 7px 0;
    div {
      width: 90%;
      border-radius: 50px;
      background: green;
      margin: 0 auto;
      height: 40px;
      line-height: 40px;
      color: rgba(255, 255, 255, 1);
      background-color: rgba(57, 122, 255, 1);
      box-shadow: 0px 2px 7px 0px rgba(255, 255, 255, 1);
    }
  }
}
</style>