时间戳

首页 > 解决方案 > Vuetify v-footer 覆盖内容

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

问题描述

我在使用 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>

标签： vue.jsvuetify.jsfooter

解决方案

添加heigth="200"到 v-footer：

<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

推荐阅读