Question

我在v页脚方面遇到了麻烦。它覆盖内容。当我包含图像时，我会看到这种情况。看这支笔：

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-img>
                </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-img>
            </v-col>
        </v-row>
    </v-container>
</v-footer>

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

Answer 2

删除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-img>
                </v-col>
            </v-row>
        </v-container>
    </v-footer>
  </v-app>
</div>

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

Vuetify v页脚叠加内容

2 个答案: