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: enter image description here

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

How do I go about fixing this?

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

<!-- language: lang-html -->
<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