使 v-card 拉伸到父组件的底部

Question

我在 v-navigation-drawer 中有 v-card:

 <v-navigation-drawer
      dark
      src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
      width="100%"
      permanent
      class="rounded"
    >
      <v-btn>Test</v-btn> <v-btn>Test</v-btn>
      <v-card-text>A Text</v-card-text>
      <v-card class="blue elevation-7" width="240">
        <v-card-text>
          <div class="font-weight-bold ml-8 mb-2">Today</div>

          <v-timeline align-top dense>
            <v-timeline-item
              v-for="message in messages"
              :key="message.time"
              :color="message.color"
              small
            >
              <div>
                <div class="font-weight-normal">
                  <strong>{{ message.from }}</strong> @{{ message.time }}
                </div>
                <div>{{ message.message }}</div>
              </div>
            </v-timeline-item>
          </v-timeline>
        </v-card-text>
      </v-card>
    </v-navigation-drawer>

我怎样才能stretch/fill进入父组件的底部，使父组件与网格的其余部分保持相同的高度？

这是我试图实现的帮助图片（用黑线标记我试图让导航抽屉与右边的内容（3 张卡片）以及导航抽屉内的卡片具有相同的高度应该把它填到底部但不要超过它。

这是最小的可重现示例，您可以在其中看到它不起作用：

https://codesandbox.io/s/vuetify-playground-barchart-forked-c08hr?file=/src/components/dashboard/MiniMenu.vue

Answer 1

您可以使用 Jquery 实现它并获取您的正确元素的大小并将其设置到您的 vcard。

怎么猜身高？ https://api.jquery.com/height/

Answer 2

如果我理解正确的话，你应该只需要 CSS 就可以实现。我不确定这是否是您想要的？

如果这符合您的需要，只需将其中一个父 div 设置为 display: block;

Example

.v-application--wrap {
    display: block;
}

另一种解决方案。我能想到的，就是像这样拉伸 SalesCards

Example

编辑

为了简单起见，我创建了一个没有 vue 和 vuetify 的 codesandbox。
我认为解决这个问题的最好方法是利用 css-grid.

Example

Answer 3

首先，让我重复一下我的理解：

你想让导航抽屉的高度等于内容
您希望抽屉式导航栏中的卡片填满抽屉式导航栏的高度

要完成第一点，您只需删除 min-height 属性的值（默认为 100vh）：

.v-application--wrap {
  min-height: unset;
}

这样，应用程序的高度将适合您的内容。

现在来看第二个问题，为了让卡片填满导航抽屉的其余部分，您需要 flexbox 的一些帮助 source

.v-navigation-drawer__content {
  display: flex;
  flex-direction: column;
}

.v-card.blue {
  flex: 1 1 auto;
}

我已经在你的示例中尝试了我的解决方案，这里是 vue 文件的完整代码

<template>
  <v-navigation-drawer
    src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
    width="240"
    permanent
    floating
    class="rounded flex-shrink-0 mr-3"
  >
    <div>
      <v-btn>Test</v-btn> <v-btn>Test</v-btn>
    </div>
    <v-card-text>A Text</v-card-text>
    <v-card class="blue elevation-7" width="240">
      <v-card-text>
        <div class="font-weight-bold ml-8 mb-2">Today</div>

        <v-timeline align-top dense>
          <v-timeline-item
            v-for="message in messages"
            :key="message.time"
            :color="message.color"
            small
          >
            <div>
              <div class="font-weight-normal">
                <strong>{{ message.from }}</strong> @{{ message.time }}
              </div>
              <div>{{ message.message }}</div>
            </div>
          </v-timeline-item>
        </v-timeline>
      </v-card-text>
    </v-card>
  </v-navigation-drawer>
</template>

<script>
export default {
  data: () => ({
    messages: [
      {
        from: "You",
        message: `Sure, I'll see you later.`,
        time: "10:42am",
        color: "deep-purple lighten-1",
      },
      {
        from: "John Doe",
        message: "Yeah, sure. Does 1:00pm work?",
        time: "10:37am",
        color: "green",
      },
    ],
  }),
};
</script>

<style>
.v-application--wrap {
  min-height: unset;
}

.v-navigation-drawer__content {
  display: flex;
  flex-direction: column;
}

.v-card.blue {
  flex: 1 1 auto;
}
</style>

这是结果的屏幕截图

编辑

我从评论中注意到您还想去掉导航抽屉内的 space（填充）。为此，您只需将 px-0 和 py-0 类添加到导航抽屉中即可。

class="rounded flex-shrink-0 mr-3 px-0 py-0"

ps：请注意，我必须将两个 v-btn 包裹起来，这样它们就不会受到 [=19= 的影响] 属性他们的 parent.

这是最终输出的更新图片example

Answer 4

您可以使用display: flex;flex-direction: column

使 v-card 拉伸到父组件的底部

Make v-card stretch to the bottom of the parent component

flexbox

css-grid

vue.js

vuetify.js

编辑

编辑