Vuetify相等的高度v-tab-items
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vuetify相等的高度v-tab-items相关的知识，希望对你有一定的参考价值。
请告知如何使vuetify v-tabs内容以相同的高度块显示。我在文档中找不到这个组件的选项，这有助于高度对齐。
默认情况下，v-tab-item高度取决于其自己的内容高度：
布局示例：
<div id="app">
<v-app id="inspire">
<div>
<v-tabs v-model="active" color="cyan" dark slider-color="yellow">
<v-tab :key="tab-1">
tab 1
</v-tab>
<v-tab :key="tab-2">
tab 2
</v-tab>
<v-tab-item key="tab-1">
tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br>
</v-tab-item>
<v-tab-item key="tab-2">
tab 2 content
</v-tab-item>
</v-tabs>
</div>
</v-app>
</div>
https://codepen.io/olegef/pen/MqKaxQ
是否可以使用CSS将v-tab-items高度与最高的v-tab-item对齐？
答案
如果你还没有尝试过，那么在height类中设置你想要的min-height（不是explanation herev-tabs__content）值。
Codepen ...
new Vue({
el: '#app'
}).v-tabs__content {
background-color: green;
height: 100px;
}<div id="app">
<v-app id="inspire">
<div>
<v-tabs v-model="active" color="cyan" dark slider-color="yellow">
<v-tab :key="tab-1">
tab 1
</v-tab>
<v-tab :key="tab-2">
tab 2
</v-tab>
<v-tab-item key="tab-1">
tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br>
</v-tab-item>
<v-tab-item key="tab-2">
tab 2 content
</v-tab-item>
</v-tabs>
</div>
</v-app>
</div>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>以上是关于Vuetify相等的高度v-tab-items的主要内容，如果未能解决你的问题，请参考以下文章