如何设置证件卡的高度

Question

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

参考：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

Answer 1

Vuetify对高度道具说：手动定义卡片的高度

因此，在v-card元素中添加高度如下：

<v-card height="100%">

实际观看

Answer 2

我对接受的答案发表了评论：

<v-card height="100%">

如果您有 v-card-actions（卡片页脚），则会出现样式问题。

要均衡 v-text-card 组件，您应该创建一个自定义 (SCSS) 类：

.flexcard {
  display: flex;
  flex-direction: column;
}
// Add the css below if your card has a toolbar, and if your toolbar's height increases according to the flex display.
.flexcard .v-toolbar {
  flex: 0;
}

然后，将类添加到 v-card 组件中，如下所示：

<v-card class="flexcard" height="100%">
  ... Your code here
</v-card>

如果有人面临同样的问题，我希望这会有所帮助。

感谢Sindrepm 和他的 CodePen

除了上述内容：codepen 不包含任何卡片图像。因此，如果您在 v-card 组件中使用 v-img 组件，如下所示：

<v-card 
  class="flexcard"
  height="100%">
  <v-img
    height="200px" 
    :src=".\sample\image.png">
  </v-img>
...
<v-card>

您可能希望修复它们的最大高度以确保您的 v-card 组件具有相同的布局：

<v-card 
  class="flexcard"
  height="100%">
  <v-img
    height="200px"
    max-height="200px"
    :src=".\sample\image.png">
  </v-img>
...
<v-card>