vite+vue+ts+element-plus从零开发管理后台框架(07)-主页内容布局
测试
编辑src/views/Home.vue
,使内容超过布局。
<template>
<p v-for="item in 50">首页{{ item }}</p>
</template>
浏览器查看,当内容超过布局时有两个问题。一是滚动时会带动顶部和侧边栏滚动,二是滚动条太丑了。
固定顶部和侧边栏
编辑src/views/Main.vue
,添加el-main
样式,这里的60px
是顶部的高度。
.el-main {
height: calc(100vh - 60px);
padding: 12px;
text-align: left;
}
优化滚动条
编辑src/views/Main.vue
,el-main
修改如下。
<el-main>
<el-scrollbar>
<router-view />
</el-scrollbar>
</el-main>
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: