el-dialog中间内容的css(这是个全局样式):
.el-dialog .el-dialog__body {
border-top: 1px solid #dcdfe6;
border-bottom: 1px solid #dcdfe6;
max-height: calc(100vh - 281px);
overflow-y: auto;
}
会设置body的高度为全局-281px,故不能设置中间内容占满屏幕,效果如图
修改方法:
覆盖原有的css,在单页面覆盖,需要去掉scoped,但是在覆盖原本的css样式应该加上父层选择器,避免全局覆盖
.backDColor .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: 100%;
}
.backDColor .el-dialog__body {
border-top: 1px solid #dcdfe6;
border-bottom: 1px solid #dcdfe6;