J'essaie d'ajouter une carte avec vue et vuetify qui occupera l'espace de mon conteneur en utilisant v-flex pour créer une carte horizontale agissant de la même manière à la verticale. J'ai essayé d'ajouter un style de hauteur de 100%, en utilisant fill-height, child-flex, etc., mais je ne parviens pas à obtenir la taille de la carte pour remplir le conteneur.
ref: https://vuetifyjs.com/fr/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>
exemple: https://codepen.io/anon/pen/LmVJKx
Vuetify dit pour la hauteur les accessoires: Définissez manuellement la hauteur de la carte
Ainsi, dans l'élément v-card, ajoutez la hauteur comme suit:
<v-card height="100%">
Je ne sais pas si vous pourriez résoudre votre problème ... Mais pour votre cas, vous pouvez voir une solution au problème ici: 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>
vous pouvez essayer d'ajouter 100% de hauteur à chaque élément enfant du conteneur.
J'ai commenté sur la réponse acceptée que:
<v-card height="100%">
donne un problème de style si vous avez v-card-actions (card footer).
Pour égaliser le composant v-text-card, vous devez créer une classe personnalisée (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;
}
Ajoutez ensuite la classe au composant v-card, comme ceci:
<v-card class="flexcard" height="100%">
... Your code here
</v-card>
J'espère que cela aidera si quelqu'un est confronté au même problème.
Crédits à Sindrepm et son CodePen
Il va fixer la hauteur et ajouter du défilement à la verticale
<v-card class="scroll-y" style="height: 650px">