Question

我正在关注以下示例： https://codepen.io/pen/?&editable=true&editors=101

<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卡占据其余的高度。我该如何实现？

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的Codepen，适用于您发布的示例。

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>

为我做了

如何使v-tab项和v-tab项填充高度

3 个答案: