vuetify 中的 v-tabs 没有占用 100% 的高度答案

【问题标题】：v-tabs in vuetify is not taking 100% heightvuetify 中的 v-tabs 没有占用 100% 的高度
【发布时间】：2018-12-17 18:52:52
【问题描述】：

v-tabs 组件的高度不是 100%。检查后，我可以看到所有选项卡项目（即选项卡内容）都被包裹在一个

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

如何定位v-tab__items 类？或者还有其他方法可以达到同样的效果吗？我尝试了 Vuetify 的 height API，但没有达到预期的效果。

任何帮助表示赞赏:)

【问题讨论】：

stackoverflow.com/questions/54553663/…

标签： vue.js vuejs2 vuetify.js

【解决方案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。

EDIT 更新了 v-layout 的 sn-p 起始标签是自动关闭的。

【讨论】：

这对我很有用。 .tab-item-wrapper { 高度：计算（100vh - 270px）；溢出-y：自动； }
有一个没有calc()的解决方案。我已经发布了答案。 @a--对于标题格式的抄袭很抱歉，它们很酷且易于阅读:(

【解决方案2】：

这在 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>

【讨论】：

【解决方案3】：

上下文

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

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

我的解决方案

通常不是 Vuetify 问题，而是纯 CSS 问题。 只需使用 flexbox 和overflow 属性，即使计算父级高度也可以解决。

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

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

【讨论】：

【解决方案4】：

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

.tabs__content
    {
        min-height: 100vh;
    }

【讨论】：

【解决方案5】：

Vuetify 2.3.10 的简单解决方案：

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

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

【讨论】：

【解决方案6】：

你可以在你的单文件组件中添加一个更具特异性的 CSS 选择器

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

【讨论】：