Vuetify v-footer 覆盖内容

Question

我在使用 v-footer 时遇到了问题。它覆盖了内容。当我包含图像时，我看到会发生这种情况。看这支笔：

https://codepen.io/slayerbleast/pen/zYxYXZL

如果您滚动到末尾，您会看到页脚在末尾如何增长并与内容重叠为什么要这样做？我只希望页脚创建自己的 space... 而且这种效果对于小设备更差，只需调整 window

这是布局：

<v-app>
  <div class="header">
    <v-navigation-drawer v-model="drawer" app>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="title">
            {{ user.name }}
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-divider></v-divider>

      <template v-slot:append>
        <v-list-item link @click="logout">
          <v-list-item-icon>
            <v-icon>logout</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>
              logout
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-navigation-drawer>

    <v-app-bar absolute app dark height="100" class="px-12">
      (...)
    </v-app-bar>
  </div>

  <v-content>
    <p>content</p>
  </v-content>

  <v-footer absolute inset app width="auto" class="py-12">
    <v-container>
      <v-row justify="center">
        <v-col lg="2" md="3" cols="12" align-self="center">
          <v-img
            src="https://picsum.photos/id/419/200/300"
            max-width="50"
            max-height="50"
          />
        </v-col>
      </v-row>
    </v-container>
  </v-footer>
</v-app>

Answer 1

删除 absolute 和 app 属性...

<div id="app">
  <v-app>
    <v-content>
      ...
    </v-content>
    <v-footer inset width="auto" class="py-12">
      <v-container>
        <v-row justify="center">
          <v-col lg="2" md="3" cols="12" align-self="center">
            <v-img
              src="https://picsum.photos/id/419/200/300"
              max-width="50"
              max-height="50"
            />
          </v-col>
        </v-row>
      </v-container>
    </v-footer>
  </v-app>
</div>

https://codeply.com/p/1BmDspkD9n

Answer 2

已将 heigth="200" 添加到 v 页脚：

<v-footer absolute inset app height="200" width="auto" class="py-12">
  <v-container>
    <v-row justify="center">
      <v-col lg="2" md="3" cols="12" align-self="center">
        <v-img
          src="https://picsum.photos/id/419/200/300"
          max-width="50"
          max-height="50"
        />
      </v-col>
    </v-row>
  </v-container>
</v-footer>

https://codepen.io/TheEvilThinker/pen/JjooLmM

Vuetify v-footer 覆盖内容

Vuetify v-footer overlays content

vue.js

vuetify.js

footer