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

Question

我正在使用 Vuetify 并希望 v-navigation-drawer 和 v-toolbar 固定到视口(viewport)但 v-footer 不是，即只有在您滚动到页面底部时才会出现。

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

然而，即使页脚不在 View 中，抽屉会在末尾留出空间，“固定”页脚可能会占用，这看起来不对。

截图:

当我滚动到底部时，页脚占用了留给它的空间:

我该如何解决这个问题？

Answer 1

这很麻烦，但我通过添加 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>

Demo in CodePen