更新时间:2022-10-27 13:15:00
如果你还没有尝试过,那么设置你想要的height
(不是min-height
v-tabs__content 类中的 href="https://***.com/questions/2341821/height100-vs-min-height100">解释)值.
Codepen ...
new Vue({埃尔:'#app'})
.v-tabs__content {背景颜色:绿色;高度:100px;}
<div id="app"><v-app id="inspire"><v-tabs v-model="active" color="cyan" 深色滑块-color="yellow"><v-tab :key="tab-1">标签 1</v-tab><v-tab :key="tab-2">标签 2</v-tab><v-tab-item key="tab-1">标签 1 内容<br>标签 1 内容<br>标签 1 内容<br>标签 1 内容<br>标签 1 内容<br></v-tab-item><v-tab-item key="tab-2">标签 2 内容</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>
Please advise how to make vuetify v-tabs content displayed in equal height blocks. I found no options for this component in documentation which can help with height alignment.
By default v-tab-item height depends on its own content height:
Layout example:
<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
Is it possible to align v-tab-items height by tallest v-tab-item using CSS only?
If you haven't tried yet, then setting your desired height
(not min-height
explanation here) value in v-tabs__content
class.
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>