vue.js - Vuetify v-footer 覆盖内容

Question

我在使用 v-footer 时遇到了麻烦。它覆盖了内容。我看到当我包含图像时会发生这种情况。看这支笔:
https://codepen.io/slayerbleast/pen/zYxYXZL
如果您滚动到最后，您将看到页脚在与内容重叠的末尾如何增长
为什么要这样做？我只希望页脚创建自己的空间...
这种效果对于小设备来说更糟，只需调整窗口大小
这是布局:

<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

已添加 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