Element Plus弹窗在移动端高度溢出怎么处理？

宇文雨涵提问于 2026-02-19 17:00:29 阅读 6

框架

在移动端用el-dialog弹窗时，设置固定高度后内容总是溢出屏幕，试过设置max-height: 100%也不行，滚动条还卡在对话框边缘。

代码这样写的：


<el-dialog :visible="showModal" style="height: 300px">
  <div class="content">
    
  </div>
</el-dialog>

在手机端测试时发现，当内容超过屏幕高度，底部会被遮罩层截断。用开发者工具模拟移动端时，发现弹窗的实际高度不受父容器影响，但文档里写应该支持百分比高度…

Vue3 Vue生态状态管理

我来解答赞 6 收藏

反馈

1 条解答

UI爱景 Lv1

这个问题我也遇到过，Element Plus 的弹窗在移动端确实有点坑。主要是因为 el-dialog 的样式默认是基于固定高度的，而百分比高度在这种场景下可能会失效。

我的解决办法是通过动态计算屏幕高度来设置弹窗的最大高度，并且让内容区域支持滚动。你可以试试下面的写法：

<el-dialog :visible="showModal" custom-class="mobile-dialog">

  <div class="content" style="max-height: 80vh; overflow-y: auto;">

    

  </div>

</el-dialog>

然后加一点样式调整：

.mobile-dialog {

  max-height: 90vh; /* 弹窗最大高度占屏幕90% */

  margin: auto; /* 居中对齐 */

  display: flex;

  flex-direction: column;

}

.mobile-dialog .el-dialog__body {

  flex: 1; /* 让内容区域可以撑满剩余空间 */

  overflow: hidden; /* 防止滚动条冲突 */

}

这样改完之后，弹窗的高度会根据屏幕大小动态调整，内容区域如果超出也会自动出现滚动条，不会卡在对话框边缘了。

还有一点需要注意，如果你用的是 Vue 3，记得检查 custom-class 是否生效，有时候需要手动引入样式。希望能帮到你！

2026-02-19 17:01