el-drawer实现底部按钮固定，不受滚动条影响

在使用 Element UI 的 el-drawer 组件时，如果你想实现底部按钮固定在 el-drawer 内容的底部，而不受滚动条影响，你可以通过 CSS 的定位属性来实现。以下是一个简单的示例：

<template>
  <el-drawer
    :visible.sync="drawerVisible"
    size="50%"
    :with-header="false"
  >
    <div class="drawer-content">
      <!-- 这里是你的内容 -->
      <div class="content">
        <!-- 滚动内容 -->
      </div>
      <!-- 固定在底部的按钮 -->
      <div class="fixed-button">
        <el-button @click="drawerVisible = false">关闭</el-button>
      </div>
    </div>
  </el-drawer>
</template>
 
<script>
export default {
  data() {
    return {
      drawerVisible: false
    };
  }
};
</script>
 
<style scoped>
.drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 使内容垂直居中，底部按钮靠底部 */
}
 
.content {
  overflow-y: auto; /* 内容超出时可滚动 */
  flex: 1; /* 充满除去按钮之外的空间 */
}
 
.fixed-button {
  position: sticky;
  bottom: 0;
  padding-top: 10px; /* 与内容间隔 */
  background-color: white; /* 与 drawer 背景色一致 */
}
</style>

在这个示例中，.drawer-content 类定义了一个高度为100%的容器，并使用了 flex 布局使得内容可以在 el-drawer 的主体区域居中显示，底部按钮通过 position: sticky 固定在底部。这样，即使内容区域有滚动，底部按钮也会固定在 el-drawer 的底部，不会随着滚动而移动。