問題描述

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的效果演示圖：

總結

以上是生活随笔為你收集整理的element vue 纵向滑动条_【求助】vue element搭建的后台，侧边栏如何设置滚动条？...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。