Vuetify - Fixed NavigationDrawer with absolute Footer leaves unnecessary space

Question

I'm using Vuetify and want the scenario where the v-navigation-drawer and the v-toolbar are fixed to the view-port but the v-footer isn't, i.e only appears once you scroll to the bottom of the page.

I have applied the fixed prop to both the drawer and the toolbar and they stick to the view-port just fine. I have also added the absolute prop to the footer which makes it appear at the very bottom of the page.

However, even though the footer is not in view, the drawer leaves space at the end that a 'fixed' footer would have taken up, which doesn't look right.

Screenshot:

When I scroll to the bottom, the footer takes up the space that was left for it:

How do I go about fixing this?

Answer 1

It's hacky, but I fixed it by adding app & inset and removing the left padding with .pl-0 like this:

<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

Answer 2

[Bug Report] v-footer leaves v-navigation-drawer too short when inset #4686

See this github issue, I believe you have found a bug that has been tagged critical and inProgress 14 days ago. Here is a codepen demo of the bug.