Vue控制子路由页高度并设置滚动条样式

父组件内： 

<template>
  <el-container>
    <el-aside width="200px"><Sidebar /></el-aside>
    <el-main>
      <Headbar />
      <router-view /> //控制的是这个子路由页的高度
    </el-main>
  </el-container>
</template>

<style lang='scss'>//注意这里使用的是sass
.el-main {
  padding: 0 !important;
}
.container-main {
  height: calc(100vh - 59px) !important;//控制子路由页高度，59px是顶部navbar的高度
  overflow-y: scroll !important;//添加并更改子路由页滚动条样式
  &::-webkit-scrollbar {
    width: 7px;
  }
  &::-webkit-scrollbar-thumb {
    background: #d8d8d8;
    border-radius: 10px;
  }
  &::-webkit-scrollbar-track-piece {
    background: transparent;
  }
}
</style>

 子组件内：

<template>
  <div class="container-main"> //添加刚才在父组件内定义的样式类名即可
    <h1>main</h1>
    <h1>main</h1>
    <h1>m