Question

v-tabs组件的高度不为100％。检查后，我发现所有标签项（即标签内容）都包裹在

内

<div class='v-tab__items'>  
  your content  
</div>

如何定位v-tab__items类？还是有另一种方法可以达到相同目的？我尝试了Vuetify的height API，但没有获得期望的结果。

我们将不胜感激：）

Answer 1

上下文

我在这里发布答案，因为我在搜索解决自己的问题时发现了这个问题。就我而言，我希望标签内容占据所有高度。这听起来与您的问题相似，但是由于该问题未提供有关该问题的任何详细信息，因此我将做出一些假设。

解决方案

由于v-tab__items具有其内容的高度，因此为具有所需高度的内容创建父元素，在我的情况下，我使用视口高度（请注意，标签也有其自己的高度，内容必须考虑在内）。我将其与<v-layout align-center justify-center column fill-height/>结合使用。请参见以下示例：

new Vue({
  el: '#app'
})

.tab-item-wrapper {
  /* vuetify sets the v-tabs__container height to 48px */
  height: calc(100vh - 48px)
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-tabs>
      <v-tab>tab</v-tab>
      <v-tab-item>
        <div class="tab-item-wrapper">
          <v-layout align-center justify-center column fill-height/>
            <v-btn color="success">Success</v-btn>
            <v-btn color="error" outline>Error</v-btn>
          </v-layout>
        </div>
      </v-tab-item>
    </v-tabs>
  </v-app>
</div>

注意：我无法找到一种避免对tab-height进行硬编码的解决方案，因为这是hardcoded on Vuetify styles，它还没有公开为variable。

Answer 2

上下文

我在尝试解决与@a--m did相同的问题时发现了这个问题，但是他们的解决方案并不遵循单一事实来源原则。如果将来的Vuetify版本中v-tabs的高度发生变化，则布局将按预期停止工作，并且需要重写calc()。从逻辑上讲，我们的选项卡项目应该对标题高度一无所知。

此外，v-tab-item不应位于v-tabs内部，而应位于单独的v-tabs-items组件中。

我的解决方案

通常，这不是Vuetify问题，而是纯CSS问题。即使使用计算父级高度，也可以仅使用弹性框和overflow属性来解决。

请参阅更专业的主题中的 my answer 以及带有v-tabs的改编的 JSFiddle 示例。

在此特定情况下，唯一的区别是在!important上设置overflow: auto时需要使用v-tabs-items修饰符。

Answer 3

我找了两个小时。但是我发现了

.tabs__content
    {
        min-height: 100vh;
    }

Answer 4

这在Vuetify 2中对我有效。

.v-tabs-items.full-height-tab  .v-window-item {
  height: calc(100vh - 270px); /* Adjust 270px to suits your needs */
  overflow-y: auto;
}

<v-tabs-items class="full-height-tab">
    <v-tab-item>...</v-tab-item>
    <v-tab-item>...</v-tab-item>
</v-tabs-items>

Answer 5

Vuetify 2.3.10的简单解决方案：

在包含<v-tabs>，<v-tab>和<v-tab-item>的组件中，将其添加到您的样式中：

 .v-window__container {
   min-height: 100vh;
 }

Answer 6

您可以在单一文件组件中使用CSS选择器，具有更大的特异性

<style>
  .my-component .v-tab__items
  {
    height: 100%;
  }
</style>

vuetify中的v-tab不占据100％的高度

6 个答案:

上下文

解决方案

上下文

我的解决方案