我正在尝试使用 vue 和 vuetify 添加一张卡,它将占用容器中的空间,使用 v-flex 创建一张水平卡,其垂直方向的作用相同。我尝试使用 fill-height、child-flex 等添加 100% 的高度样式,但我无法获取卡片的大小来填充容器。调整高度的正确方法是怎样的?
ref: https://vuetifyjs.com/en/components/cards https://vuetifyjs.com/en/components/cards
<div id="app">
<v-app id="inspire">
<v-toolbar color="green" dark fixed app>
<v-toolbar-title>My Application</v-toolbar-title>
</v-toolbar>
<v-content >
<v-container fluid fill-height >
<v-layout
justify-center
align-center
>
<v-flex text-xs-center >
<v-card class="elevation-20" >
<v-toolbar dark color="primary">
<v-toolbar-title>I want this to take up the whole space with slight padding</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer color="green" app inset>
<span class="white--text">© 2018</span>
</v-footer>
</v-app>
</div>
例子:https://codepen.io/anon/pen/LmVJKx https://codepen.io/anon/pen/LmVJKx
Vuetify 说的是height props: 手动定义卡片的高度
因此,在 v-card 元素中添加高度,如下所示:
<v-card height="100%">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)