如何设置vuetify卡的高度答案

【问题标题】：How to set the height of vuetify card如何设置vuetify卡的高度
【发布时间】：2018-04-20 20:50:54
【问题描述】：

我正在尝试使用 vue 和 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

【问题讨论】：

喜欢这个codepen?
评论有点晚，但我遇到了类似的问题，需要添加溢出：隐藏到卡片和卡片文本

标签： css vue.js vuetify.js

【解决方案1】：

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

所以，在 v-card 元素中添加高度如下：

<v-card height="100%">

See it in action

【讨论】：

接受这个，因为它将解决我的问题。但是，上面 cmets 中的 @Sphinx 正是我想要的。
仔细阅读文档....这对我来说真的是看不见的...仍然不知道这是写在这里...
@Renetik 如果你去这里 => vuetifyjs.com/en/components/cards#api 并搜索你会看到的高度道具
这部分是一个很好的解决方案，但是当卡片有一个动作页脚（如 v-card-actions）时，它不会解决问题。将卡片设为 100% 高度将拉伸页脚。有没有办法将 v-card-text 设置为等于其他 v-card-text 元素？会喜欢这样的解决方案。
顺便说一句，我正在使用 v-card-text style="height: 150px;"作为我上面描述的问题的快速解决方案。我不得不提到这并没有完全解决问题（而且我讨厌内联样式，这很恶心）

【解决方案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 and his 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>

【讨论】：

【解决方案3】：

我不知道您是否可以解决您的问题...但是对于您的情况，您可以在此处查看问题的解决方案：https://codepen.io/carlos-henreis/pen/djaQKb

<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 fill-height>
              <v-card class="elevation-20" height='100%'>
              <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; 2017</span>
    </v-footer>
  </v-app>
</div>

【讨论】：

【解决方案4】：

我用的是 100vh 或 vw。它使它适合整个高度。

【讨论】：

这是 2021 年 6 月对我有用的解决方案。谢谢。 (高度='100vh')

【解决方案5】：

您可以尝试为容器的每个子元素添加 100% 的高度。

【讨论】：

【解决方案6】：

它将固定高度并在垂直方向添加滚动

<v-card class="scroll-y"  style="height: 650px">

【讨论】：