el-dialog固定头部与底部，中间内容滑动

最新推荐文章于 2024-10-12 16:18:03 发布

大白592

最新推荐文章于 2024-10-12 16:18:03 发布

阅读量955

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_69890748/article/details/138497838

版权

问题描述：如果不优化样式，会出现滑动占屏超出100%，不放便操作。
html和css优化代码：

<style lang="less" scoped> 
::v-deep.home-confirm-dialog .el-dialog__body{
  max-height: calc(100vh - 150px);
  overflow: auto;
  border-top:1px solid #dfdfdf;
  border-bottom:1px solid #dfdfdf;
}
::v-deep .el-dialog{
  position: fixed;
  height:fit-content;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  margin:auto !important;
}
</style>

<template>
  <el-dialog
    v-loading="loadingDialog"
    :title="readonly ? '查看固定周期' : '固定周期设置'"
    :visible.sync="add_show"
    width="50%"
    class="home-confirm-dialog"
    top="2vh"
    :close-on-click-modal="false"
    element-loading-text="拼命发布中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.3)"
  >
    内容自已补充，不管多高，头部与底部会固定的
    <div slot="footer" class="dialog-footer content_center">
        <el-button v-if="!readonly" type="primary" @click="add_show = false">确认</el-button>
        <el-button type="info" @click="add_show = false">取消</el-button>
    </div>
  </el-dialog>
</template>

效果图：