如何设置vuetify卡的高度

iyzzxitl  于 2023-01-21  发布在  Vue.js
关注(0)|答案(7)|浏览(365)

我尝试添加一张vue和vuetify的卡片,它将占用我的容器中的空间,使用v-flex创建一张水平卡片,垂直方向也是如此。我尝试添加一个100%的高度样式,使用fill-height,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

jfgube3f

jfgube3f1#

Vuetify对身高 prop 说:* 手动定义卡片高度 *
因此,在v-card元素中添加高度如下:

<v-card height="100%">

查看实际应用

hyrbngr7

hyrbngr72#

我对公认答案的评论是:

<v-card height="100%">

如果您有v-card-actions(卡片页脚),则会出现样式问题。
要平衡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;
}

然后,将类添加到v-card组件,如下所示:

<v-card class="flexcard" height="100%">
  ... Your code here
</v-card>

如果有人面临同样的问题,我希望这能有所帮助。
贷记Sindrepm and his CodePen
除上述内容外:codepen不包含任何卡图像。因此,如果您在您的v-card组件中使用v-img组件,如下所示:

<v-card 
  class="flexcard"
  height="100%">
  <v-img
    height="200px" 
    :src=".\sample\image.png">
  </v-img>
...
<v-card>

您可能需要固定它们的最大高度,以确保您的v-card组件布局相同:

<v-card 
  class="flexcard"
  height="100%">
  <v-img
    height="200px"
    max-height="200px"
    :src=".\sample\image.png">
  </v-img>
...
<v-card>
but5z9lq

but5z9lq3#

我不知道你是否能解决你的问题...但对于你的情况,你可以在这里看到问题的解决方案: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>
6qftjkof

6qftjkof4#

我用的是100vh或者vw,它使它适合整个高度。

yzuktlbb

yzuktlbb5#

你可以尝试给容器的每个子元素增加100%的高度。

mw3dktmi

mw3dktmi6#

它将固定的高度和添加滚动垂直

<v-card class="scroll-y"  style="height: 650px">
xa9qqrwz

xa9qqrwz7#

由于某种原因,h-100不能在https://next.vuetifyjs.com/en/styles/sizing/上工作,实际上需要在v-card上使用style="height: 100%"height="100%"进行内联样式化。

相关问题