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

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

框架

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

代码这样写的：


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

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

Vue3 Vue生态状态管理

我来解答赞 11 收藏

反馈

2 条解答

Code°巧丽 Lv1

拿去改改，Element Plus 的 el-dialog 在移动端确实容易踩这个坑，问题在于它默认是 absolute 定位，加上固定 height 会直接撑破视口，而不是自适应。

关键点是：不要设 height，用 max-height + overflow 控制内容区域。

模板改成这样：

<el-dialog 

  :visible="showModal" 

  :close-on-click-modal="false"

  class="mobile-dialog"

>

  <div class="dialog-content">

    <!-- 你的内容 -->

  </div>

</el-dialog>

CSS 这样写（重点是 dialog-body 的 overflow）：

.mobile-dialog .el-dialog {

  margin: 0;

  height: auto;

  max-height: 90vh;

}



.mobile-dialog .el-dialog__body {

  padding: 16px;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

}

原理就是：让 el-dialog 自动适应内容高度，但限制最大高度为视口的 90%，把滚动交给 el-dialog__body，这样底部就不会被遮罩截断，也不会卡在边缘。

如果还是卡，加一句：

.el-dialog__body::-webkit-scrollbar {

  display: none;

}

隐藏滚动条但保留滚动能力，移动端体验更顺滑。

记住：永远别在 el-dialog 上直接写 height：xxx px，移动端就用 max-height + vh 单位。

2026-02-25 12:08

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