如何使卡具有相同的高度？

Question

我的卡高音并未按照我的预期显示。我当时想将最大高度设置为我的V-Card-Text

<v-col cols="3" v-for="note in notes">
    <v-card :loading="loading" max-width="374">
        <template slot="progress">
            <v-progress-linear color="deep-purple" height="10" indeterminate></v-progress-linear>
        </template>

        <v-img height="250" :src="note.img"></v-img>

        <v-card-title>{{ note.name }}</v-card-title>

        <v-card-text height="200px">
            <div>{{ note.description }}</div>
        </v-card-text>

        <v-card-text>
            <v-chip-group v-model="selection" active-class="deep-purple accent-4 white--text" column>
                <v-chip v-for="tag in note.tag">
                    {{ tag }}
                </v-chip>
            </v-chip-group>
        </v-card-text>
    </v-card>
</v-col>

我认为

对我没有任何建议吗？

Answer 1

您可以实现这一目标：

.v-card-text {
  height: 200px;
  overflow-y: auto;
}

如果您不想要卷轴，并且裁剪的文字很好：
Overflow-y：hidden;

缺点：

• .v-card-text 始终具有此高度
• 想要在浏览器上自定义滚动栏外观，这些浏览器在桌面上显示宽滚动条（17px）（例如：Chrome）。

---

另外，如果您希望每行中的最高卡设置高度（带有不同高度的卡的行）且没有任何溢出，但是在某些卡上有一些空白，我可以帮助您实现它，如果您创建了它可运行的片段，所以我可以测试。原则上，您需要给出卡容器显示：flex; flex方向：列;并给出.v-card-text {flex-grow：1}。

在实践中，该卡可能包含多个包装器，这就是为什么如果您对此解决方案感兴趣，我需要看现场片段的原因。