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>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main</h1>
<h1>main1111111111</h1>
</div>
</template>
————————————————
版权声明：本文为CSDN博主「wj1713520」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wj1713520/article/details/123533490