Vuetify：更改 v-application--wrap 的最小高度答案

【问题标题】：Vuetify: changing min-height of v-application--wrapVuetify：更改 v-application--wrap 的最小高度
【发布时间】：2021-09-03 10:48:02
【问题描述】：

我使用 vuetify 组件作为页面上的小部件以及小部件之后的其他内容。但是，我在小部件和页面的其余部分之间有太多可用空间。 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>

【问题讨论】：

请通过添加相关代码重现您的问题来改进您的问题（模板标记丢失）
@petey 我已经更新了问题，但模板很短。即使在空白页面上，我也会得到这个额外的空间。

标签： vue.js vuetify.js

【解决方案1】：

我也遇到了同样的问题，解决方法如下：

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

在 App.vue 中

另外，我已经使用 vue-cli 将它构建为一个库

我是 Vue 和 Vuetify 的新手。

【讨论】：

不幸的是，它没有帮助。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：