el-dialog高度不超过屏幕

你可以通过设置`max-height`属性来限制`el-dialog`的高度不超过屏幕。首先，你需要在`el-dialog`的样式中添加一个自定义的类名，比如`dialog-max-height`。然后，在你的样式表中添加以下代码：

.dialog-max-height .el-dialog__wrapper {
  max-height: 100vh;
}

这里的`100vh`表示视口高度的百分比，确保`el-dialog`的高度不会超过屏幕的高度。最后，将自定义的类名应用到你的`el-dialog`组件上：

<el-dialog class="dialog-max-height"></el-dialog>

这样，你的`el-dialog`的高度就不会超过屏幕了。

相关问题

弹框内的el-dialog高度不超过屏幕

要确保弹框内的el-dialog高度不超过屏幕，可以采取以下几个步骤：

1. 使用CSS样式设置el-dialog的最大高度为屏幕高度减去一些固定的边距。
例如，你可以添加以下样式到你的CSS文件中：

.el-dialog {
  max-height: calc(100vh - 100px); /* 这里的100px是你希望保留的边距大小 */
}

2. 如果el-dialog的内容超过了最大高度，可以使用overflow-y属性来添加垂直滚动条。这样即使内容超过了弹框的高度，用户仍然可以通过滚动来查看所有内容。

.el-dialog {
  overflow-y: auto;
}

3. 在el-dialog组件中，可以设置其`max-height`属性为一个具体的数值，以限制其高度。

通过以上步骤，你可以确保el-dialog的高度不会超过屏幕，并且使用滚动条来查看内容。

vue3 el-dialog高度设置

在Vue3中，可以通过给el-dialog元素添加自定义的样式来设置其高度。可以在el-dialog外部套一层div，并给这个div添加一个自定义的类名，然后在样式中设置这个类名的高度即可。下面是一个示例代码：

<<引用:现在要实现一种窗口高度固定，内容滚动的方式，如下直接在内容上套一层div并加上自定义样式el-dialog-div &lt;el-dialog :title="templateTitle" :visible.sync="openTemplateDialog" :width="templateDialogWidth" append-to-body :close-on-click-modal="false" &gt; &lt;div class="el-dialog-div"&gt; // 窗口内容 &lt;/div&gt; &lt;/el-dialog&gt; &lt;style lang="scss"&gt; .el-dialog-div { height: 60vh; overflow-x: hidden; } &lt;/style&gt; 。

el-dialog默认高度是自由拉伸的，当内容超过屏幕时会出现滚动条，按钮和标题都会随着滚动，用户体验不好。为了解决这个问题，你可以使用以下方法来设置el-dialog的高度：

1. 在el-dialog外部套一层div，并给这个div添加一个自定义的类名，比如"el-dialog-div"。
2. 在样式中设置这个类名的高度，比如设置为60vh，表示60%的视口高度。
3. 同时，设置这个div的overflow-x属性为hidden，以隐藏水平滚动条。

这样，el-dialog的高度就会被固定为60%的视口高度，并且出现内容超出时会出现垂直滚动条，而按钮和标题则保持固定不动，提升了用户体验。