Dialog 结合Vue实现对话框body“二分”布局

需求描述

如下图，

1. 把对话框body内容部分，分成上下两部分，其中上部分高度根据窗口大小动态调整，如果内容过多，则出现滚动条，以便滚动查阅被遮挡内容，下部分内容(即关闭|保存按钮所在容器)高度固定。
2. 对话框高度不固定，随窗口高度变化而变化

代码实现

<template>
<el-dialog
title="负载配置"
width="60%"
:visible="dialogVisible"
custom-class="dialog-settings"
>
<load-settings-form :loadSettingsForm="loadSettingsForm" ref="loadSettingsForm"></load-settings-form>
<div class="dialog-footer">
<el-button @click="closeDialog">关闭</el-button>
<el-button type="primary" @click="saveLoadSettings('loadSettingsForm')">保存</el-button>
</div>
</el-dialog>
</template>

<script>
// 略
</script>

<style lang="scss">
.dialog-settings {
height: 70%;
.el-dialog__body {
height: auto;
flex-direction: column;
display: flex;
height: calc(100% - 54px);
padding: 0px 20px 20px 20px;
overflow: none;
.load-settings-form {
flex: 1;
overflow: auto;
}
.dialog-footer {
flex-shrink: 0;
text-align: center;
}
}
}
</style>

说明：

height: calc(100% - 54px);  // 设置对话框body高度为对话框高度-对话框标题栏高度

这里的

54px

class=".el-dialog__header"

div