CSS 如何设置vuetify卡的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49949548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the height of vuetify card
提问by Darwin
I am attempting to add a card with vue and vuetify that will take up the space in my container using v-flex to create a horizontal card that acts the same way vertically. I have attempted to add a height style of 100%, using fill-height, child-flex, etc but I cannot get the size of the card to fill the container. What is the correct way to adjust the height?
我正在尝试添加一张带有 vue 和 vuetify 的卡片，它们将使用 v-flex 占用我容器中的空间来创建一个水平卡片，该卡片在垂直方向上的作用相同。我曾尝试使用填充高度、child-flex 等添加 100% 的高度样式，但我无法获得卡片的大小来填充容器。调整高度的正确方法是什么？
ref: https://vuetifyjs.com/en/components/cards
参考：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">© 2018</span>
</v-footer>
</v-app>
</div>
example: https://codepen.io/anon/pen/LmVJKx
回答by roli roli
Vuetify says for heightprops: Manually define the height of the card
Vuetify 说高度道具：手动定义卡片的高度
So,in v-card element add height as follow:
因此，在 v-card 元素中添加高度如下：
<v-card height="100%">
回答by Carlos Henrique Reis
I don't know if you could solve your problem... But for your case you can see a solution to the problem here: https://codepen.io/carlos-henreis/pen/djaQKb
我不知道你是否能解决你的问题......但对于你的情况，你可以在这里看到问题的解决方案：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">© 2017</span>
</v-footer>
</v-app>
</div>
回答by JustDevelop
I've commented on the accepted answer that:
我对接受的答案发表了评论：
<v-card height="100%">
gives an styling issue if you have v-card-actions (card footer).
如果您有 v-card-actions（卡片页脚），则会出现样式问题。
To equalize the v-text-card component, you should create a custom (SCSS) class:
要均衡 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;
}
Then, add the class to the v-card component, like this:
然后，将类添加到 v-card 组件中，如下所示：
<v-card class="flexcard" height="100%">
... Your code here
</v-card>
I hope this helps if someone is facing the same issue.
如果有人面临同样的问题，我希望这会有所帮助。
Credits to Sindrepm and his CodePen
In addition to the above: The codepen does not include any card images. So in case you are using v-img components in your v-card components like this:
除了上述内容：codepen 不包含任何卡片图像。因此，如果您在 v-card 组件中使用 v-img 组件，如下所示：
<v-card
class="flexcard"
height="100%">
<v-img
height="200px"
:src=".\sample\image.png">
</v-img>
...
<v-card>
you probably want to fix their maximum heights ensuring same layout on your v-card components:
您可能希望修复它们的最大高度以确保您的 v-card 组件具有相同的布局：
<v-card
class="flexcard"
height="100%">
<v-img
height="200px"
max-height="200px"
:src=".\sample\image.png">
</v-img>
...
<v-card>
回答by Klod Lala
i used 100vh or vw. It made it fit the whole height.
我用了 100vh 或 vw。它使它适合整个高度。
回答by Atchutha rama reddy Karri
It will fixed the height and add scroll on vertical
它将固定高度并在垂直方向上添加滚动
<v-card class="scroll-y" style="height: 650px">
回答by Hyman
you can try add height 100% to every child-element of the container.
您可以尝试将高度 100% 添加到容器的每个子元素。
