el-dialog body滚动的设置
.el-dialog { position: relative; margin: 0 auto 0px; background: #FFFFFF; border-radius: 2px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; height: 60%; } .el-dialog__body { border-top: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6; max-height:85% !important; min-height: 70%; overflow-y: auto; //如需设置滚动条样式 &::-webkit-scrollbar { width: 2px; background-color: #ccc; } &::-webkit-scrollbar-thumb { background-color: #0ae; } &::-webkit-scrollbar-track { background-color: #ccc; } }
或者
.el-dialog { margin: 4% auto auto auto !important; height: 500px; .el-dialog__body { position: absolute; left: 0; top: 54px; bottom: 0; right: 0; padding: 0; z-index: 1; overflow: hidden; overflow-y: auto; box-sizing: border-box;
&::-webkit-scrollbar { width: 2px; background-color: #ccc; } &::-webkit-scrollbar-thumb { background-color: #0ae; } &::-webkit-scrollbar-track { background-color: #ccc; } } }
或者极简模式:
.el-dialog { .el-dialog__body { //border-top: 1px solid #dcdfe6; //border-bottom: 1px solid #dcdfe6; max-height: 500px !important; min-height: 100px; overflow-y: auto; } }