如何在不可包裹的Vuetify可滚动容器右下角定位按钮

DevOps 小满

2026-6-15

解决方案

修改后的代码示例

<v-card-text
  style="min-height: 700px; position: relative;"
  class="px-6 py-4 overflow-auto"
>
  <v-row no-gutters>
    <v-col>
      <div
        v-for="(log, i) in logs"
        :key="i"
      >
        {{ log }}
      </div>
    </v-col>
  </v-row>
  <v-btn
    style="position: absolute; bottom: 16px; right: 24px; z-index: 1;"
    color="primary"
  >
    操作按钮
  </v-btn>
</v-card-text>

核心实现逻辑

给滚动容器设置相对定位：为v-card-text添加position: relative，让内部绝对定位的按钮以该容器为定位基准，避免脱离滚动区域。同时显式声明overflow-auto，确保内容超出容器时触发滚动。
固定按钮到右下角：给v-btn设置position: absolute，通过bottom: 16px和right: 24px匹配容器的py-4（上下内边距16px）和px-6（左右内边距24px），让按钮与容器边缘保持合适间距。
保证按钮层级：添加z-index: 1，确保按钮始终显示在日志内容上方，不会被滚动的日志条目遮挡。