v-tabs in vuetify is not taking 100% height

问题

The v-tabs component doesn't take 100% height. Upon inspecting, I could see that all the tab items (i.e. tab contents) are being wrapped inside a

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

How do target the v-tab__items class? Or is there another way to achieve the same? I have tried the height API from Vuetify, which did not yeild the desired result.

Any help is appreciated :)

回答1:

Context

I'm posting an answer here since I found this question when searching to solve my own problem. In my case I wanted the tab content to occupy all the height. Which sounds similar to your problem, but since the question does not provide any specifics for the problem I will make some assumptions.

Solution

Since v-tab__items will have the height of its content, create a parent element for the content that has the desired height, in my case I use the viewport height (note that, since the tabs also have its own height, the content must take that into account). I use this in conjunction with <v-layout align-center justify-center column fill-height/>. See the following example:

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>

Note: I could not find a solution to avoid hardcoding the tab-height, by the time being this is hardcoded on Vuetify styles it's not exposed as a variable.

回答2:

Context

I found this question while trying to solve the same problem as @a--m did but their solution does not respect a single source of truth principle. If v-tabs height changes in the future Vuetify versions, the layout will stop working as expected, and calc() will be needed to be rewritten. Logically, our tab items should know nothing about header height.

Moreover, v-tab-item should not be inside v-tabs but in a separate v-tabs-items component.

My solution

Generally it is not a Vuetify issue but a pure CSS problem. It can be solved just with flexboxes and overflow property, even when the parent height is computed.

Please see my answer in more specialized thread and the adapted JSFiddle example with v-tabs.

The only difference in this specific case is a need to use !important modifier when you set overflow: auto on v-tabs-items.

回答3:

I was looking for 2 hours. But I found

.tabs__content
    {
        min-height: 100vh;
    }

回答4:

This works for me in 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>

回答5:

You can a CSS selector in your single-file component with a larger specificity

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

来源：https://stackoverflow.com/questions/51256542/v-tabs-in-vuetify-is-not-taking-100-height

标签

Vue.js

vuejs2

vuetify.js