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

Question

该v-tabs组件并不需要100％的高度。检查后，我发现所有选项卡项（即选项卡内容）都被包装在

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

如何定位v-tab__items课程？还是有另一种方法可以达到相同目的？我尝试了heightVuetify 的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，目前这是在 Vuetify 样式上硬编码的，它没有作为变量公开。

编辑v-layout 的更新代码片段起始标记是自动关闭的。

Answer 2

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

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