问题描述

vue-cli下用element搭建了一个后台管理系统的项目

遇到了如下1个问题

问题：侧边栏的导航菜单，在高端超出的情况下，如何能设置和vue-elemnet-admin一样的滚动条？

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

后台的布局图：

样式代码：

/* 框架 */

.container {

position: absolute;

top: 0px;

bottom: 0px;

width: 100%;

}

/* 头部 */

.header {

height: 50px;

line-height: 50px;

color: #fff;

background-color: #409eff;

// LOGO

.logo {

width: 200px;

height: 50px;

line-height: 50px;

font-size: 18px;

color: #fff;

background-color: #409eff;

}

.logo-width {

width: 200px;

}

.logo-collapse-width {

width: 64px;

}

// 顶部按钮

.admin-side-toggle,

.admin-side-home {

width: 30px;

height: 30px;

float: left;

background-color: #fff;

margin-left: 10px;

margin-top: 10px;

line-height: 30px;

}

.admin-side-home {

margin-right: 10px;

}

.admin-side-toggle a,

.admin-side-home a {

color: #409eff;

display: block;

}

}

/* 身体 */

.body {

display: flex;

position: absolute;

top: 50px;

bottom: 0px;

overflow: hidden;

width: 100%;

// 侧边菜单

.aside {

flex: 0 0 200px;

width: 200px;

height:100%;

background-color: #304156;

// 图标

i {

color: #bfcbd9;

margin-right: 10px;

}

}

//收缩后的

.menu-collapsed {

flex: 0 0 64px;

width: 64px;

}

// 主要内容

.main {

flex: 1;

overflow-y: scroll;

padding: 10px 10px;

background-color: #f2f2f2;

.app-main {

padding: 10px;

background-color: #fff;

text-align: left;

}

}

}

/* 顶部菜单 */

.el-menu--horizontal > .el-menu-item {

float: left;

height: 50px;

line-height: 50px;

margin: 0;

border-bottom: 2px solid transparent;

color: #909399;

}

/* 顶部菜单 */

.el-menu-demo {

float: left;

}

.el-menu-demo a {

text-decoration: none;

display: block;

}

.el-menu-demo i {

color: #fff;

}

.userinfo {

text-align: right;

padding-right: 35px;

float: right;

}

.userinfo .userinfo-inner {

cursor: pointer;

color: #fff;

}

.userinfo .userinfo-inner img {

width: 40px;

height: 40px;

border-radius: 20px;

margin: 5px 0px 0px 10px;

float: right;

}

/* 侧边菜单 */

.el-menu {

border: 0;

text-align: left;

}

.el-menu a {

color: #fff;

text-decoration: none;

display: block;

}

问题演示图：

vue-element-admin的效果演示图：