代码之家 › 专栏 › 技术社区 › KorbenDose

如何使用Vuetify填充垂直空间

vuetifyjs3 css

KorbenDose · 技术社区 · 2 年前

如果我有一个有两行的容器,如何使第一行填充高度,使第二行位于屏幕底部,只占用所需的空间?

这是我当前的代码。

<template>
  <v-container class="d-flex flex-column flex-nowrap">
    <v-row class="flex-grow-1"> Content </v-row>
    <v-row> Button </v-row>
  </v-container>
</template>

1 回复 | 直到 2 年前

Md. Rakibul Islam 2 年前

我不熟悉Vue或这个库,但我在谷歌上搜索了文档,这个页面似乎解释了 all the Flexbox related classes you can use.

似乎添加了类 flex-1-1-100 将设置 flex: 1 1 100% !important 在CSS中,这是你希望第一个项目占用所有空间,然后不要在第二个项目上设置任何内容,使其只占用需要的空间。

<template>
  <v-container
    class="d-flex flex-column flex-nowrap">
    <v-row class="flex-1-1-100"> Content </v-row>
    <v-row> Button </v-row>
  </v-container>
</template>

这是 a demo of it working on their playground 我添加了一些额外的类,用于填充和背景颜色,以及容器高度,这样就可以看到发生了什么。