Vuetify：改变 min-height of v-application--wrap

Question

我将 vuetify 组件用作页面上的小部件以及该小部件之后的另一个内容。但是，小部件和页面其余部分之间的空闲 space 太多了。 vuetify 应用占用了太多高度，我不知道如何删除它。

这是它在浏览器中的样子。

我试图通过以下方式覆盖 App.vue 的 css，但它不起作用。有什么建议吗？

<style scoped>
[data-vuetify] {
  overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
  min-height: 0vh !important;
}
</style>

下面是 App.vue 的样子：

<template>
  <div data-vuetify>
    <v-app id="app">
      <router-view></router-view>
    </v-app>
  </div>
</template>

<style scoped>
section {
  margin: 10px 0;
}
[data-vuetify] {
  overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
  min-height: 0vh !important;
}
</style>

Answer 1

我也遇到过同样的问题，我是这样解决的：

<style>
  .v-application--wrap {
    min-height: 0vh !important;
  }
</style>

在App.vue

此外，我使用 vue-cli 将其构建为一个库

我是 Vue 和 Vuetify 的新手。

Answer 2

这是对我有用的解决方案。

<style scoped lang="scss">
 ::v-deep .v-application--wrap {
    min-height: fit-content;
  }
</style>

Answer 3

尝试通过 App.vue 文件中的 CSS 取消设置：

<style>
.v-application--wrap {
  min-height: unset;
}
</style>

它应该取消设置默认规则“min-height: 100vh;”。

Answer 4

对我来说，我从组件中删除了 <v-app> 并将其添加到封闭页面（我使用的是 Nuxt），这从组件中删除了额外的 space。

Vuetify：改变 min-height of v-application--wrap

Vuetify: changing min-height of v-application--wrap

vue.js

vuetify.js