如何使 v-tabs-items 和 v-tab-item 填充高度

Question

我正在按照示例进行操作： 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-card 占据其余的高度。我怎样才能实现它？

Answer 1

我今天遇到了这个问题。对我有用的一种可能的解决方案是找出由 vuetify 生成的类的层次结构，使用检查器，然后破解这些特定类的 css。这是基于建议in this SO answer 建议修改.v-tabs__content 的高度。不幸的是，该类似乎不再存在，而是（在您发布的示例中）生成的层次结构类似于

<div>
<!-- Top level container of the tabbed interface -->
  <nav>
    <!-- Toolbar and tab header generated here -->
  </nav>
  <div class="v-window">
    <div class="v-window__container">
      <div class="v-window-item">
        <div class="v-card">
          <div class="v-card__text">Text.</div>
        </div>
      </div>
    </div>
  </div>
</div>

因此，有必要修改v-window、v-window__container 和v-window-item 的css 高度，以确保选项卡内容容器根据需要拉伸到其父级的大小。最后，我们需要改变内部内容的高度，在本例中为v-card。

在我的代码中，我最终还为容器包装器设置了display:flex，而flex 仅用于.v-window。使用 flex 可确保工具栏下方的所有内容正确对齐，并最终确保选项卡内容的正确拉伸高度。

这是我的解决方案 https://codepen.io/anon/pen/wNEOdy 的代码笔，适用于您发布的示例。

HTML：

<div id="app">
  <v-app id="inspire">
    <div class="tab-wrapper">
      <v-toolbar
        color="cyan"
        dark
        tabs
      >
        <v-toolbar-side-icon></v-toolbar-side-icon>

        <v-toolbar-title>Page title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>search</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>more_vert</v-icon>
        </v-btn>

        <v-tabs
          slot="extension"
          v-model="model"
          centered
          color="cyan"
          slider-color="yellow"
        >
          <v-tab
            v-for="i in 3"
            :key="i"
            :href="`#tab-${i}`"
          >
            Item {{ i }}
          </v-tab>
        </v-tabs>
      </v-toolbar>

      <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>
    </div>
  </v-app>
</div>

CSS：

.tab-wrapper {
  height:100%; /* Set to desired height of entire tabbed section, or use flex, or ... */
  display:flex; 
  flex-direction: column;
}

.tab-wrapper .v-window{
  flex: 1;
}

.tab-wrapper .v-window__container,
.tab-wrapper .v-window-item  {
  height: 100%;
}

/* customise the dimensions of the card content here */
.tab-wrapper .v-card {
  height: 100%;
}

JS：

new Vue({
  el: '#app',
  data () {
    return {
      model: 'tab-2',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
    }
  }
})

Answer 2

上面 amatyjajo 给出的方法效果很好，但是如果您正在使用 scoped 样式块内的组件，则需要使用深度选择器来访问嵌套的 windows 容器喜欢：

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

Answer 3

<style>
  .v-window__container {
    height: 100%
  }
</style>

为我做的