使v卡延伸到父组件的底部。
使v卡延伸到父组件的底部。
提问于 2021-04-09 11:25:33
我有一张v卡，在v导航抽屉里：
<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>如何才能将其拉伸/填充到父组件的底部，使父组件与网格的其余部分保持相同的高度？
这是我试图达到的目标的助手图片(用黑线标记，我试着让导航抽屉和右边的内容一样高(3张卡片)，而且导航抽屉里的卡片应该填充到底部，而不是超过它。
下面是一个最低限度的可重复的示例，您可以看到它不起作用：
回答 4
Stack Overflow用户
回答已采纳
发布于 2021-04-15 09:52:01
首先，让我重复我所理解的：
- 您希望使导航抽屉高度与内容相等。
- 您希望导航抽屉中的卡片填充导航抽屉的高度。
要完成第一点，只需删除min-height属性值(默认情况下为100vh)：
.v-application--wrap {
min-height: unset;
}这样，应用程序高度将适合您的内容。
现在到第二个问题，为了使卡片填满导航抽屉的其余部分，您需要一些来自flexbox 来源的帮助
.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>这是结果的截图
编辑
我从评论中注意到，您也希望摆脱导航抽屉中的空格(填充)。为此，您只需将px-0和py-0类添加到导航抽屉中即可。
class="rounded flex-shrink-0 mr-3 px-0 py-0"ps：注意，我必须用两个v-btn包起来，这样它们就不会受到父级display: flex属性的影响。
下面是最后输出示例的更新图片
Stack Overflow用户
发布于 2021-04-13 08:53:53
Stack Overflow用户
发布于 2021-04-19 06:32:09
您可以使用display: flex;flex-direction: column
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67020238
复制相关文章
相似问题
腾讯云开发者
