如何制作v-tab-项目和v-tab-项目填充高度 [英] How to make v-tabs-items and v-tab-item fill height

问题描述

我正在关注以下示例: https://vuetifyjs.com/en/components/tabs#content

I am following the example: https://vuetifyjs.com/en/components/tabs#content

<v-tabs-items v-model="model">
    <v-tab-item
      v-for="i in 3"
      :key="i"
      :value="`tab-${i}`"
    >
      <v-card flat>
        <v-card-text v-text="text"></v-card-text>
      </v-card>
    </v-tab-item>
  </v-tabs-items>

但是，我希望v卡能承受其余的高度.我该如何实现?

However, I want v-card to take the rest of height. How can I achieve it?

推荐答案

上面的 amatyjajo 给出的方法效果很好，但是如果您正在使用作用域中的组件样式块，您需要使用深度选择器来访问嵌套的Windows容器，例如:

The approach given by amatyjajo above works well, but if you are working with components inside a scoped style block, you'll need to use a deep selector to get to the nested windows containers like:

.tab-items-row >>> .v-window__container,
.tab-items-row >>> .v-window-item {
  height: 100%;
}

这篇关于如何制作v-tab-项目和v-tab-项目填充高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！