如何设置证件卡的高度 [英] How to set the height of vuetify card

问题描述

我正在尝试添加一张带有vue和vuetify的卡片，这将使用v-flex占用我的容器中的空间，以创建水平的卡片，该卡片在垂直方向上的作用相同.我尝试使用填充高度，child-flex等方式添加100％的高度样式，但是我无法获得卡片的大小来填充容器.调整高度的正确方法是什么?

I am attempting to add a card with vue and vuetify that will take up the space in my container using v-flex to create a horizontal card that acts the same way vertically. I have attempted to add a height style of 100%, using fill-height, child-flex, etc but I cannot get the size of the card to fill the container. What is the correct way to adjust the height?

ref: 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">&copy; 2018</span>
    </v-footer>
  </v-app>
</div>

示例: https://codepen.io/anon/pen/LmVJKx

推荐答案

Vuetify表示高度道具:手动定义卡片的高度

Vuetify says for height props: Manually define the height of the card

因此，在v卡元素中，按如下所示增加高度:

So,in v-card element add height as follow:

<v-card height="100%">

查看实际操作

这篇关于如何设置证件卡的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！