Quasar Vue 3：如何让行内QCard内容区域高度一致？

直接修改你的组件代码，核心是把QCard设置为垂直Flex容器，并让内容区自动填充剩余空间：

<template>
  <div>
    <div class="row items-stretch">
      <div class="col-12 col-md-6">
        <q-card class="full-height flex column">
          <q-card-section class="flex-grow-1">
            <div class="text-h6">Card 1</div>
            <div class="text-subtitle2">Card 1 content</div>
          </q-card-section>
          <q-separator />
          <q-card-actions align="right">
            <q-btn no-caps color="brand">Go to One</q-btn>
          </q-card-actions>
        </q-card>
      </div>

      <div class="col-12 col-md-6">
        <q-card class="full-height flex column">
          <q-card-section class="flex-grow-1">
            <div class="text-h6">Card 2</div>
            <div class="text-subtitle2">More content of a different "size"<br />include extra lines</div>
          </q-card-section>
          <q-separator />
          <q-card-actions align="right">
            <q-btn no-caps color="brand">Go to Two</q-btn>
          </q-card-actions>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardRow'
}
</script>

<style scoped>
.full-height {
  height: 100%;
}
</style>

关键修改说明： #

• 给q-card添加flex column类：将卡片转为垂直方向的Flex容器，让内部元素能按垂直方向分配空间。
• 给所有q-card-section添加flex-grow-1类：让内容区占据卡片内除分隔线、操作按钮外的所有可用垂直空间，强制所有卡片的内容区高度统一，底部操作按钮自然对齐。

之前的尝试无效，是因为默认QCard不是Flex布局，flex-grow属性无法在非Flex容器的子元素上发挥作用。

内容的提问来源于stack exchange，提问作者boltej