场景1：
<div class="mian>
   <div>头部</div>
  <div class="content">只要内容区域滚动</div>
</div>

## 方案一：main使用flex垂直布局，并个一个height。然后，content设置overflow:auto;

<template>
    <div class="main">
        <!-- 顶部导航 -->
        <div >
            头部
        </div>

        <!-- 内容 -->
        <div class="content">
              br*100 1
        </div>
    </div>
</template>


<style>
/* 顶部导航 */
.main {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* 内容 */
.content {
    overflow: auto;
}
</style>

场景2:
<div class="mian>
   <div>头部</div>
  <div class="content">只要内容区域滚动</div>
</div>
<footer>尾部内容</footer>

方案二利用calc属性、主体内容 - 头部height - 尾部height - 等等……

<div class="asset">
        <!-- 导航 -->
        <Header>
            <template slot="center">
                <span class="fw-600">资产</span>
            </template>
        </Header>

        <!-- 内容 -->
        <section class="overflow">
           
        </section>
 </div>

// 开启滚动类
.overflow {
    height: calc(100vh - 2rem); // 主体内容 - 头部height - 尾部height
    overflow: auto;
    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    -webkit-overflow-scrolling: touch;
}