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)的高度，