首页 文章

如何设置vuetify卡的高度

提问于
浏览 次
2

我正在尝试添加一张带有vue和vuetify的卡片，它将占用我容器中的空间，使用v-flex创建一个垂直方向相同的水平卡片 . 我试图添加100％的高度样式，使用填充高度，child-flex等，但我无法获得卡的大小来填充容器 . 调整高度的正确方法是什么？

参考：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">&copy; 2018</span>
    </v-footer>
  </v-app>
</div>

示例：https://codepen.io/anon/pen/LmVJKx

css vue.js vuetify.js

3 回答

  • 4

    您可以尝试将100％的高度添加到容器的每个子元素 .

    回复于
  • 1

    使用Vuetify，您可以做几乎所有事情，但仔细阅读文档 . 如果你看看api部分，你会发现你会发现工作的道具高度 .

    Vuetify说 height 道具：手动定义卡的高度

    所以，在v-card元素中添加高度如下：

    <v-card height="100%">

    See it in action

    回复于
  • 0

    我不知道你是否可以解决你的问题...但对于你的情况，你可以在这里看到问题的解决方案：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">&copy; 2017</span>
    </v-footer>
  </v-app>
</div>
    回复于

相关问题