v-tabs in vuetify is not taking 100% height

Question

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 :)

Answer 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/[email protected]/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/[email protected]/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.

EDIT Updated snippet starting tag for v-layout was self closing.