The Element UI component improves development efficiency by providing width to set the width of the Dialog, but does not specify how to fix the height.

The height of the dialog box varies with the amount of content in the dialog box, as shown below:

Too much content:

This makes for a bad experience, so in order to prevent content from going out of the popup box and seeing the buttons in the footer all the time, I need to fix the height of the dialog box. My solution is:

Create a div around the content element of the dialog box, set the height of the div, and set overflow: Auto.

<el-dialog :visible.sync="roleResDialogVisible" title='tip' width="25%" center>
    <div class="sync-dialog__div">
        <el-tree show-checkbox default-expand-all check-strictly>
        </el-tree>
    </div>
    
    <span slot="footer" class="dialog-footer">
        <el-button @click="roleResDialogVisible=false">
            {{ $t('sysManage.cancel') }}
        </el-button>
        
        <el-button type="primary" @click="roleResConfirm">
            {{ $t('sysManage.confirm') }}
        </el-button>
    </span>      
</el-dialog>

<style lang="scss" scoped>           
.sync-dialog__div {
    height: 300px;
    overflow: auto;
}
</style>
Copy the code

This way, no matter how much content there is, you can prevent the content from going out of the box and keep seeing the button in the footer as follows:

If the content is too much, the scroll bar will appear and will not exceed the popbox, as follows: