Element UI Dialog 长内容把「确定」按钮挤出视区的根因与正解

某后台管理系统有一个弹窗，表单字段不多，平时用起来很正常。但当用户填完一个输入项失焦后，弹窗底部动态弹出一段红色错误提示列表——内容一撑高，「取消 / 确定」两个按钮就不见了。用户必须往下滚才能点到，体验极差。更诡异的是：不是 dialog 内部在滚，而是整个弹窗连同背景遮罩一起在上下移动。

现象

el-dialog 内有 form + 动态 alert 列表；alert 内容较多时 dialog 整体高度超过视口
滚动时不是 dialog body 区域内滚，而是整个 modal 层外滚
footer 里的「取消 / 确定」按钮随 dialog 整体滚出屏幕底部，用户必须向下滚才能操作
小屏幕（笔记本 1080p）和内容较多时必现，大屏低概率

根因

Element UI 2.x 的 .v-modal（遮罩层）是 position: fixed; inset: 0; overflow: auto。当 el-dialog 的内容高度超过视口时，遮罩层自身出现滚动条，用户看到的就是整个弹窗可以上下拖动——footer 跟着一起移出视区。

el-dialog 的内部 DOM 结构是三段顺次流式布局：

.el-dialog
  ├── .el-dialog__header
  ├── .el-dialog__body    ← 内容放这里，默认不限高
  └── .el-dialog__footer  ← 取消/确定，流式最下方

没有内置「body 内滚 + footer 锁底」机制。若给 dialog 自身设了固定 height，又不限制 body，body 内容会溢出 dialog 边框压住 footer，更糟糕。

坑：给 dialog 设 height 但不限 body，footer 被压死

只写 .el-dialog { height: 420px } 而不给 .el-dialog__body 加 max-height，body 内容会溢出 dialog 容器，直接覆盖在 footer 之上，按钮可见但无法点击。

另一个常见误操作是给 footer 加 position: sticky; bottom: 0——在 modal 内部 sticky 行为依赖父容器 overflow，跨浏览器一致性差，不可靠。

正解

让 body 区域自己滚，dialog 整体高度由 header + body(max-height) + footer 决定，永远不超过视口。

/* 用 custom-class 限定作用域，不污染其他 dialog */
::v-deep.my-dialog {
  height: auto; /* 移除可能存在的固定 height，让 dialog 自适应 */
 
  .el-dialog__body {
    max-height: calc(80vh - 130px);
    /* 130px = header ≈ 54px + footer ≈ 54px + 余量 22px */
    overflow-y: auto;
    padding-right: 12px; /* 给滚动条留位，避免内容贴右边 */
  }
}

<el-dialog
  custom-class="my-dialog"
  :visible.sync="visible"
  title="绑定设置"
>
  <el-form>...</el-form>
  <el-alert v-if="hasError" type="error">...</el-alert>
 
  <span slot="footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
</el-dialog>

注意 ::v-deep.my-dialog 中间没有空格——这是复合选择器，加了空格会变成后代选择器，作用域就错了。

正解：body max-height + overflow-y:auto，让内容在 body 内滚

dialog 自身 height: auto，高度由三段内容决定
body 加 max-height: calc(80vh - 130px) + overflow-y: auto，超出部分在 body 内独立滚动
footer 永远位于 dialog 最下方且在视口内，无需 sticky / fixed

调参经验：80vh 是经验值，电脑屏和小屏都留有边距；内容特别多可改 85vh，对话框型可用 70vh。

一句话外卖

el-dialog 自身没有「body 内滚 + footer 锁底」机制，必须手动给 .el-dialog__body 加 max-height + overflow-y: auto，否则内容一超高就把 footer 推出视区。