我尝试添加一张vue和vuetify的卡片,它将占用我的容器中的空间,使用v-flex创建一张水平卡片,垂直方向也是如此。我尝试添加一个100%的高度样式,使用fill-height,child-flex等,但是我无法获得卡片的大小来填充容器。调整高度的正确方法是什么?
参考: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>
7条答案
按热度按时间jfgube3f1#
Vuetify对身高 prop 说:* 手动定义卡片高度 *
因此,在v-card元素中添加高度如下:
查看实际应用
hyrbngr72#
我对公认答案的评论是:
如果您有v-card-actions(卡片页脚),则会出现样式问题。
要平衡v-text-card组件,您应该创建一个自定义(SCSS)类:
然后,将类添加到v-card组件,如下所示:
如果有人面临同样的问题,我希望这能有所帮助。
贷记Sindrepm and his CodePen
除上述内容外:codepen不包含任何卡图像。因此,如果您在您的v-card组件中使用v-img组件,如下所示:
您可能需要固定它们的最大高度,以确保您的v-card组件布局相同:
but5z9lq3#
我不知道你是否能解决你的问题...但对于你的情况,你可以在这里看到问题的解决方案:https://codepen.io/carlos-henreis/pen/djaQKb
6qftjkof4#
我用的是100vh或者vw,它使它适合整个高度。
yzuktlbb5#
你可以尝试给容器的每个子元素增加100%的高度。
mw3dktmi6#
它将固定的高度和添加滚动垂直
xa9qqrwz7#
由于某种原因,
h-100
不能在https://next.vuetifyjs.com/en/styles/sizing/上工作,实际上需要在v-card
上使用style="height: 100%"
或height="100%"
进行内联样式化。