el-dialog设置固定高度

原创已于 2023-06-25 15:26:51 修改 · 8.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

于 2023-03-20 14:38:11 首次发布

文章提供了两种方法来修改CSS对话框的高度和滚动行为。第一种方法涉及使用flex布局和具体的百分比高度，同时设置了内部元素的定位和颜色。第二种方法更简洁，直接通过设置对话框的高度为78vh并启用自动滚动。这两种方法都确保了内容在对话框内正确显示。

class="showAll_dialog" css

<style lang="scss" scoped>
// 修改对话框高度
.showAll_dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  ::v-deep .el-dialog {
    margin: 0 auto !important;
    height: 80%;
    overflow: hidden;

    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
      // 下边设置字体，我的需求是黑底白字
      color: #ffffff;
      line-height: 30px;
      padding: 0 15px;
    }
  }
}

</style>

第二种最简单的：

::v-deep .el-dialog {
  height: 78vh;
  overflow: auto;
}