如何移除Vuetify中v-carousel-item组件底部的多余空白

可行解决方案 #

方案1：隐藏底部指示器（最优解，适配绝大多数场景） #

Vuetify v-carousel 默认开启底部小圆点指示器，会在组件底部固定预留专属高度，这是空白问题的核心诱因。你当前代码仅关闭了左右切换箭头，未关闭指示器，直接给v-carousel添加hide-delimiters属性即可解决：

<v-carousel
  cycle
  :show-arrows="false"
  hide-delimiters
  style="background-color: pink"
>
  <v-carousel-item
    v-for="item in carouselItems"
    :key="item.id"
    style="background-color: purple; height: 800px"
    class="pb-0 mb-0"
  >
    <!-- 轮播项内容 -->
  </v-carousel-item>
</v-carousel>

方案2：保留指示器，改为悬浮布局 #

如果业务需要保留底部指示器，不想让它占用额外文档流高度，可以自定义样式让指示器悬浮在轮播内容上层：

<template>
  <v-carousel
    cycle
    :show-arrows="false"
    style="background-color: pink"
    class="custom-carousel"
    height="800px"
  >
    <v-carousel-item
      v-for="item in carouselItems"
      :key="item.id"
      style="background-color: purple;"
      class="pb-0 mb-0"
    >
      <!-- 轮播项内容 -->
    </v-carousel-item>
  </v-carousel>
</template>

<style scoped>
.custom-carousel ::v-deep .v-carousel__controls {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  background: transparent;
}
</style>

注：建议将轮播高度统一配置在v-carousel组件上，避免子项高度不一致出现异常

方案3：调整内容对齐方式 #

如果是轮播内容高度小于组件高度，默认垂直居中导致的上下空白，可以给轮播内容容器添加对齐规则，比如顶部对齐：

<v-carousel-item>
  <div class="d-flex flex-column align-start justify-start h-100">
    <!-- 图片、标题、副标题内容 -->
  </div>
</v-carousel-item>

内容的提问来源于stack exchange，提问作者Meena Chaudhary