时间戳

首页 > 解决方案 > Vuetify - 修复了具有绝对页脚的 NavigationDrawer 会留下不必要的空间

vue.js - Vuetify - 修复了具有绝对页脚的 NavigationDrawer 会留下不必要的空间

问题描述

我正在使用 Vuetify 并且想要将v-navigation-drawer和v-toolbar固定到视口但v-footer不是的场景，即仅在滚动到页面底部时出现。

我已经将fixed道具应用于抽屉和工具栏，它们很好地粘在视口上。我还在absolute页脚中添加了道具，使其出现在页面的最底部。

然而，即使页脚不在视图中，抽屉在最后会留下一个“固定”页脚会占用的空间，这看起来不正确。

截屏： 在此处输入图像描述

当我滚动到底部时，页脚占用了留给它的空间： 在此处输入图像描述

我该如何解决这个问题？

标签： vue.jsvuetify.js

解决方案

这很 hacky，但我通过添加app&inset和删除左填充来修复它，.pl-0如下所示：

<v-navigation-drawer
      v-model='state.drawerOpen'
      fixed
      app >

    <v-list >

    </v-list>

    <v-footer class="justify-center pl-0" inset app>
      <span>&copy; 2018</span>
    </v-footer> 

</v-navigation-drawer>

CodePen 中的演示

推荐阅读